Density Ledger

"use client";

import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react";

/**
 * DensityLedger — a list you zoom like a map: rows get denser under your hand, and the row you point at stays put.
 *
 * Density is continuous, from 64px rows with a second line to 22px rows
 * with every column: pinch on a trackpad (or ctrl+wheel), pinch on touch,
 * drag the ruler, or press [ and ]. The row under the pointer is anchored
 * on screen while everything around it resizes. Columns arrive at
 * thresholds (sparkline, category, time, id) with a small hysteresis, and
 * type and stroke weight follow. A lamp lights the row under the pointer.
 * Density is the shared Ultra value, so every Ultra asset on the page
 * re-spaces with the ledger (pass density and onDensityChange to control
 * it yourself). Status is a shape, never a colour alone. Plain DOM with
 * content-visibility; virtualise beyond about 2,000 rows.
 *
 * Part of the Ultra kit: an adaptive style whose grammar is the viewer. Every
 * Ultra asset reads six live values (contrast, warmth, light, density, motion,
 * focus) from one shared tuning and re-forms its tone, edges, density and
 * tempo to match: move any Ultra control and every Ultra asset on the page
 * follows. Values the viewer sets are saved on the device (localStorage
 * key ultra:v1); the rest follow the system (prefers-contrast,
 * prefers-reduced-motion, prefers-color-scheme) and the time of day. Nothing
 * is sent anywhere. Every colour is solved for APCA contrast at runtime, so no
 * tuning can make text illegible. Springs are critically damped (no
 * overshoot) and motion 0 swaps states. Type through var(--font-ultra)
 * (Google Sans Flex, whose GRAD and ROND axes follow contrast) over Geist.
 * Paste it as its own file: it carries its own copy of the small engine, and
 * copies on one page share a single store through Symbol.for.
 * Needs Tailwind v4 (on v3.4, add the @tailwindcss/container-queries plugin).
 */

/** The six values every Ultra asset reads. Each runs 0..1. */
export type UAxis = "contrast" | "warmth" | "density" | "motion" | "focus" | "light";

export type UAxes = Record<UAxis, number>;

/** Dial order, clockwise from the top. */
const U_AXES: UAxis[] = ["contrast", "warmth", "light", "density", "motion", "focus"];

/** What the server renders and what an asset shows before the store boots. */
const U_DEFAULTS: UAxes = { contrast: 0.45, warmth: 0.3, light: 0.1, density: 0.4, motion: 0.45, focus: 0.35 };

/** The exposure band no text can sit on (ground L 0.46..0.66): light snaps out of it. */
const U_LIGHT_GAP: [number, number] = [0.46, 0.54];

const uClamp = (v: number, a = 0, b = 1) => (v < a ? a : v > b ? b : v);

const uLerp = (a: number, b: number, t: number) => a + (b - a) * t;

const uSmooth = (a: number, b: number, x: number) => {
  const t = uClamp((x - a) / (b - a));
  return t * t * (3 - 2 * t);
};

/** Nearest safe exposure: anything inside the unsafe band goes to its closer edge. */
function uSafeLight(v: number): number {
  const [a, b] = U_LIGHT_GAP;
  if (v <= a || v >= b) return uClamp(v);
  return v - a < b - v ? a : b;
}

interface UStore {
  v: 1;
  /** The values the viewer pinned (dragged). Only these are saved. */
  pinned: Partial<UAxes>;
  /** Values derived from the system (prefers-*) and the clock. */
  auto: UAxes;
  /** Which auto values the system decided (those beat an author's seed). */
  sys: { contrast: boolean; motion: boolean };
  /** The author's starting look for values the viewer has not set. */
  seed: Partial<UAxes>;
  /** pinned over auto: what assets read. A new object on every change. */
  snap: UAxes;
  listeners: Set<() => void>;
  booted: boolean;
  /** The one goal on screen: the first claimant wins the filled accent. */
  goals: string[];
  /** Shared pointer, for gaze-driven assets. Written by one passive listener. */
  gaze: { x: number; y: number; speed: number; t: number; live: boolean };
}

const U_KEY = "ultra:v1";

function uStore(): UStore {
  const g = globalThis as unknown as Record<symbol, UStore | undefined>;
  const sym = Symbol.for("viberdy.ultra.v1");
  let s = g[sym];
  if (!s) {
    s = {
      v: 1,
      pinned: {},
      auto: { ...U_DEFAULTS },
      sys: { contrast: false, motion: false },
      seed: {},
      snap: { ...U_DEFAULTS },
      listeners: new Set(),
      booted: false,
      goals: [],
      gaze: { x: -1, y: -1, speed: 0, t: 0, live: false },
    };
    g[sym] = s;
  }
  return s;
}

function uEmit(s: UStore) {
  const seed = { ...s.seed };
  if (s.sys.contrast) delete seed.contrast;
  if (s.sys.motion) delete seed.motion;
  s.snap = { ...s.auto, ...seed, ...s.pinned };
  s.snap.light = uSafeLight(s.snap.light);
  s.listeners.forEach((fn) => fn());
}

function uMedia(q: string): boolean {
  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
}

/** Auto values: system preferences first, then the clock (read at boot and when the tab returns, never on a timer). */
function uAuto(): UAxes {
  const a: UAxes = { ...U_DEFAULTS };
  if (uMedia("(prefers-contrast: more)")) a.contrast = 0.95;
  else if (uMedia("(prefers-contrast: less)")) a.contrast = 0.12;
  if (uMedia("(prefers-reduced-motion: reduce)")) a.motion = 0;
  if (uMedia("(pointer: coarse)")) a.density = 0.25;
  const h = new Date().getHours() + new Date().getMinutes() / 60;
  // Warmth rises through the evening and lowers the light with it: a warm tint alone
  // does not cut the evening's short-wave load, dimming does (RPI LRC, 2018).
  const evening = h >= 17 ? uSmooth(17, 21, h) : h < 8 ? 1 - uSmooth(6, 8, h) : 0;
  a.warmth = uLerp(0.3, 0.82, evening);
  const paper = uMedia("(prefers-color-scheme: light)");
  a.light = paper ? uLerp(0.86, 0.7, evening) : uLerp(0.12, 0.04, evening);
  return a;
}

function uLoad(): Partial<UAxes> {
  try {
    const raw = window.localStorage.getItem(U_KEY);
    if (!raw) return {};
    const data = JSON.parse(raw) as { v?: number; p?: Record<string, unknown> };
    if (data.v !== 1 || !data.p) return {};
    const out: Partial<UAxes> = {};
    for (const k of U_AXES) {
      const v = data.p[k];
      if (typeof v === "number" && Number.isFinite(v)) out[k] = uClamp(v);
    }
    return out;
  } catch {
    return {};
  }
}

function uSave(s: UStore) {
  try {
    window.localStorage.setItem(U_KEY, JSON.stringify({ v: 1, p: s.pinned }));
  } catch {
    // storage blocked: the tuning still works for this visit
  }
}

function uSys(s: UStore) {
  s.sys = {
    contrast: uMedia("(prefers-contrast: more)") || uMedia("(prefers-contrast: less)"),
    motion: uMedia("(prefers-reduced-motion: reduce)"),
  };
}

function uBoot() {
  const s = uStore();
  if (s.booted || typeof window === "undefined") return;
  s.booted = true;
  s.auto = uAuto();
  uSys(s);
  s.pinned = uLoad();
  // A shared setup (#u=c7w3l2...: one letter per value and a base-36 digit) is read once.
  const shared = /[#&]u=([a-z0-9]{2,12})/i.exec(window.location.hash);
  if (shared && shared[1]) {
    const code = shared[1].toLowerCase();
    for (let i = 0; i + 1 < code.length; i += 2) {
      const axis = U_AXES.find((k) => k[0] === code[i]);
      const v = parseInt(code[i + 1] ?? "", 36);
      if (axis && Number.isFinite(v)) s.pinned[axis] = uClamp(v / 35);
    }
    uSave(s);
  }
  uEmit(s);
  const refresh = () => {
    s.auto = uAuto();
    uSys(s);
    uEmit(s);
  };
  for (const q of ["(prefers-contrast: more)", "(prefers-contrast: less)", "(prefers-reduced-motion: reduce)", "(prefers-color-scheme: light)"]) {
    window.matchMedia(q).addEventListener("change", refresh);
  }
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") refresh();
  });
  window.addEventListener("storage", (e) => {
    if (e.key !== U_KEY) return;
    s.pinned = uLoad();
    uEmit(s);
  });
  const gz = s.gaze;
  window.addEventListener(
    "pointermove",
    (e) => {
      const dt = Math.max(1, e.timeStamp - gz.t);
      const d = gz.live ? Math.hypot(e.clientX - gz.x, e.clientY - gz.y) : 0;
      gz.speed = gz.speed * 0.7 + ((d / dt) * 1000) * 0.3;
      gz.x = e.clientX;
      gz.y = e.clientY;
      gz.t = e.timeStamp;
      gz.live = true;
    },
    { passive: true },
  );
  document.documentElement.addEventListener("pointerleave", () => {
    gz.live = false;
  });
}

/** Pin a value (the viewer chose it; it is saved), or pass null to hand it back to auto. */
export function setUltra(axis: UAxis, value: number | null) {
  const s = uStore();
  if (value === null) delete s.pinned[axis];
  else s.pinned[axis] = axis === "light" ? uClamp(value) : uClamp(value);
  uSave(s);
  uEmit(s);
}

/**
 * The author's starting look for values the viewer has not set (they win
 * over the clock, never over a system preference for reduced motion or more
 * contrast, and never over the viewer). Not saved.
 */
export function seedUltra(values: Partial<UAxes>) {
  const s = uStore();
  const next: Partial<UAxes> = { ...s.seed };
  let changed = false;
  for (const k of U_AXES) {
    const v = values[k];
    if (typeof v === "number" && Number.isFinite(v) && next[k] !== uClamp(v)) {
      next[k] = uClamp(v);
      changed = true;
    }
  }
  if (!changed) return;
  s.seed = next;
  uEmit(s);
}

function uSubscribe(fn: () => void) {
  const s = uStore();
  s.listeners.add(fn);
  uBoot();
  return () => {
    s.listeners.delete(fn);
  };
}

const uSnap = () => uStore().snap;

const uServerSnap = () => U_DEFAULTS;

/**
 * The tuning, live. `tune` pins values for this instance only (a demo, a
 * fixed brand moment); they are never saved. `bounds` lets an author limit
 * the expressive direction only: motion, density and focus can be capped,
 * contrast can be floored, warmth and light can be ranged. The way back to
 * calm (motion 0, contrast 1, density 0, focus 0) can never be bounded.
 * `seed` is the author's starting look (see seedUltra).
 */
export function useUltra(tune?: Partial<UAxes>, bounds?: Partial<Record<UAxis, [number, number]>>, seed?: Partial<UAxes>): UAxes {
  const snap = useSyncExternalStore(uSubscribe, uSnap, uServerSnap);
  const seedKey = JSON.stringify(seed ?? null);
  useLayoutEffect(() => {
    const v = JSON.parse(seedKey) as Partial<UAxes> | null;
    if (v) seedUltra(v);
  }, [seedKey]);
  // Compared by value, so inline objects do not churn.
  const tuneKey = JSON.stringify(tune ?? null);
  const boundsKey = JSON.stringify(bounds ?? null);
  return useMemo(() => {
    const tune = JSON.parse(tuneKey) as Partial<UAxes> | null;
    const bounds = JSON.parse(boundsKey) as Partial<Record<UAxis, [number, number]>> | null;
    const out: UAxes = { ...snap };
    if (tune) {
      for (const k of U_AXES) {
        const v = tune[k];
        if (typeof v === "number" && Number.isFinite(v)) out[k] = uClamp(v);
      }
    }
    if (bounds) {
      for (const k of U_AXES) {
        const b = bounds[k];
        if (!b) continue;
        let [lo, hi] = b;
        if (k === "motion" || k === "density" || k === "focus") lo = 0;
        if (k === "contrast") hi = 1;
        out[k] = uClamp(out[k], Math.min(lo, hi), Math.max(lo, hi));
      }
    }
    out.light = uSafeLight(out.light);
    return out;
  }, [snap, tuneKey, boundsKey]);
}

type URgb = [number, number, number];

function uOklab(L: number, a: number, b: number): URgb {
  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
  const l = l_ * l_ * l_;
  const m = m_ * m_ * m_;
  const s = s_ * s_ * s_;
  const lin: URgb = [
    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
  ];
  return lin.map((x) => {
    const v = uClamp(x);
    return Math.round((v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255);
  }) as URgb;
}

function uOklch(L: number, C: number, h: number): URgb {
  const r = (h * Math.PI) / 180;
  return uOklab(L, C * Math.cos(r), C * Math.sin(r));
}

const uHex = (c: URgb) => "#" + c.map((v) => v.toString(16).padStart(2, "0")).join("");

function uY(c: URgb): number {
  return 0.2126729 * Math.pow(c[0] / 255, 2.4) + 0.7151522 * Math.pow(c[1] / 255, 2.4) + 0.072175 * Math.pow(c[2] / 255, 2.4);
}

/** APCA-W3 0.0.98G lightness contrast (signed: negative = light text on dark). */
function uApca(text: URgb, bg: URgb): number {
  let yt = uY(text);
  let yb = uY(bg);
  if (yt < 0.022) yt += Math.pow(0.022 - yt, 1.414);
  if (yb < 0.022) yb += Math.pow(0.022 - yb, 1.414);
  if (Math.abs(yb - yt) < 0.0005) return 0;
  if (yb > yt) {
    const s = (Math.pow(yb, 0.56) - Math.pow(yt, 0.57)) * 1.14;
    return s < 0.1 ? 0 : (s - 0.027) * 100;
  }
  const s = (Math.pow(yb, 0.65) - Math.pow(yt, 0.62)) * 1.14;
  return s > -0.1 ? 0 : (s + 0.027) * 100;
}

/** The warmth tint: a straight line in OKLab from slate to amber, neutral at 0.5 (never a hue walk through green). */
function uTint(w: number, mag: number): [number, number] {
  return [uLerp(-0.0048, 0.0055, w) * mag, uLerp(-0.0132, 0.015, w) * mag];
}

function uCol(L: number, w: number, mag: number): URgb {
  const [a, b] = uTint(w, mag);
  return uOklab(L, a, b);
}

/** Find the ink lightness that reaches |Lc| = target on this ground (bisection, 24 steps). */
function uSolve(bg: URgb, target: number, dark: boolean, w: number): URgb {
  let lo = 0.02;
  let hi = 0.995;
  for (let i = 0; i < 24; i++) {
    const m = (lo + hi) / 2;
    const lc = Math.abs(uApca(uCol(m, w, 0.6), bg));
    if (dark) {
      if (lc < target) lo = m;
      else hi = m;
    } else if (lc < target) hi = m;
    else lo = m;
  }
  return uCol((lo + hi) / 2, w, 0.6);
}

/** The accent's hue: a calm, low-chroma blue-violet, clear of every other kit's saturated blue. */
const U_HUE = 262;

export interface UTokens {
  dark: boolean;
  /** Ground lightness (OKLab L), for shaders. */
  groundL: number;
  ground: string;
  s1: string;
  s2: string;
  well: string;
  ink1: string;
  ink2: string;
  ink3: string;
  hair: string;
  /** Hairline alpha: edges only appear as contrast rises past 0.55. */
  edge: number;
  acc: string;
  onAcc: string;
  /** 4px base unit, scaled by density. */
  unit: number;
  body: number;
  lh: number;
  /** Critically damped spring stiffness; 0 means no motion (swap states). */
  k: number;
  /** The gaze aperture in px, from focus. */
  aperture: number;
  grad: number;
  rond: number;
  /** Ground and ink as linear-ish triples (0..1 sRGB) for canvases and shaders. */
  groundRgb: URgb;
  inkRgb: URgb;
  accRgb: URgb;
}

const uTokenCache = new Map<string, UTokens>();

/** Every colour, size and tempo an Ultra asset uses, derived from the six values. No asset holds a fixed hex. */
export function ultraTokens(x: UAxes, hue = U_HUE): UTokens {
  const q = (v: number) => Math.round(v * 200) / 200;
  const key = [x.contrast, x.warmth, x.light, x.density, x.motion, x.focus].map(q).join(",") + ":" + hue;
  const hit = uTokenCache.get(key);
  if (hit) return hit;
  const c = q(x.contrast);
  const w = q(x.warmth);
  const lt = uSafeLight(q(x.light));
  const d = q(x.density);
  const m = q(x.motion);
  const f = q(x.focus);
  const dark = lt < 0.5;
  // Exposure moves the ground within its room; contrast deepens it a little.
  const gL = dark
    ? uLerp(0.15, 0.3, lt / U_LIGHT_GAP[0]) - 0.03 * (c - 0.45)
    : uLerp(0.89, 0.975, (lt - U_LIGHT_GAP[1]) / (1 - U_LIGHT_GAP[1])) + 0.012 * (c - 0.45);
  const step = dark ? uLerp(0.03, 0.05, c) : uLerp(0.022, 0.04, c);
  const g = uCol(gL, w, 1);
  const s1 = uCol(dark ? gL + step : Math.min(0.995, gL + step * 0.7), w, dark ? 1 : 0.6);
  const s2 = uCol(dark ? gL + step * 2 : Math.min(0.998, gL + step * 1.2), w, dark ? 1 : 0.5);
  const well = uCol(gL - step * 0.8, w, 1);
  const ink1 = uSolve(g, uLerp(75, 95, c), dark, w);
  const ink2 = uSolve(g, uLerp(60, 72, c), dark, w);
  const ink3 = uSolve(g, uLerp(52, 60, c), dark, w);
  const hair = uSolve(g, uLerp(30, 45, c), dark, w);
  const acc = dark ? uOklch(uLerp(0.84, 0.88, c), 0.09, hue) : uOklch(uLerp(0.5, 0.44, c), 0.14, hue);
  // A label on the fill: solved, never pure black or white.
  const onAcc = uSolve(acc, dark ? 70 : 78, !dark, w);
  const t: UTokens = {
    dark,
    groundL: gL,
    ground: uHex(g),
    s1: uHex(s1),
    s2: uHex(s2),
    well: uHex(well),
    ink1: uHex(ink1),
    ink2: uHex(ink2),
    ink3: uHex(ink3),
    hair: uHex(hair),
    edge: uClamp((c - 0.55) / 0.45),
    acc: uHex(acc),
    onAcc: uHex(onAcc),
    unit: 4 * uLerp(1.18, 0.82, d),
    body: uLerp(17, 15, d),
    lh: uLerp(1.62, 1.45, d),
    k: m < 0.02 ? 0 : uLerp(190, 560, m),
    aperture: uLerp(560, 170, f),
    grad: dark ? uLerp(40, 0, c) : uLerp(70, 30, c),
    rond: uLerp(45, 8, c),
    groundRgb: g,
    inkRgb: ink1,
    accRgb: acc,
  };
  uTokenCache.set(key, t);
  return t;
}

/** The tokens as CSS custom properties on an asset root. Children read var(--u-*). */
export function ultraVars(t: UTokens): CSSProperties {
  return {
    "--u-ground": t.ground,
    "--u-s1": t.s1,
    "--u-s2": t.s2,
    "--u-well": t.well,
    "--u-ink1": t.ink1,
    "--u-ink2": t.ink2,
    "--u-ink3": t.ink3,
    "--u-hair": t.hair,
    "--u-edge": String(t.edge),
    "--u-acc": t.acc,
    "--u-on-acc": t.onAcc,
    "--u-unit": t.unit.toFixed(2) + "px",
    "--u-body": t.body.toFixed(2) + "px",
    "--u-lh": t.lh.toFixed(3),
    colorScheme: t.dark ? "dark" : "light",
    color: t.ink1,
    fontFamily: 'var(--font-ultra, "Google Sans Flex", "Geist", ui-sans-serif, system-ui, sans-serif)',
    fontVariationSettings: '"GRAD" ' + t.grad.toFixed(0) + ', "ROND" ' + t.rond.toFixed(0),
  } as CSSProperties;
}

/**
 * The kit's scoped CSS: the one focus ring (the accent, 2px, offset 3px, the
 * element's own radius), tabular figures, and transitions off for elements a
 * frame loop writes. Rendered once per asset; identical text dedupes in React 19.
 */
const U_CSS =
  ".u-scope :focus-visible{outline:2px solid var(--u-acc)!important;outline-offset:3px!important;border-radius:revert-layer!important}" +
  ".u-scope .u-num{font-variant-numeric:tabular-nums}" +
  ".u-scope [data-u-live]{transition:none!important}";

export interface LedgerRow {
  id: string;
  title: string;
  subtitle?: string;
  category: string;
  time: string;
  status: "open" | "done" | "blocked" | "waiting";
  /** About 24 points, any scale. */
  spark: number[];
}

/** A small deterministic generator, so demo rows render the same on the server and in the browser. */
function dlRand(seed: number) {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function dlDemoRows(n = 150): LedgerRow[] {
  const r = dlRand(7);
  const verbs = ["Review", "Draft", "Ship", "Reconcile", "Plan", "Audit", "Design", "Close", "Prepare", "Approve"];
  const things = ["Q4 forecast", "onboarding flow", "vendor invoices", "pricing page", "release notes", "hiring plan", "data retention policy", "brand refresh", "support macros", "board update", "API changelog", "travel budget"];
  const cats = ["Finance", "Design", "Ops", "Research", "Legal", "Growth"];
  const st: LedgerRow["status"][] = ["open", "done", "blocked", "waiting"];
  const out: LedgerRow[] = [];
  for (let i = 0; i < n; i++) {
    const v = verbs[Math.floor(r() * verbs.length)] ?? "Review";
    const t = things[Math.floor(r() * things.length)] ?? "notes";
    let y = 0.5;
    const spark: number[] = [];
    for (let k = 0; k < 24; k++) {
      y = Math.min(1, Math.max(0, y + (r() - 0.48) * 0.22));
      spark.push(Math.round(y * 100) / 100);
    }
    const h = 8 + Math.floor(r() * 10);
    const m = Math.floor(r() * 4) * 15;
    out.push({
      id: "T-" + (1040 + i * 7),
      title: v + " " + t,
      subtitle: "Updated by " + ["Ana", "Ravi", "Mei", "Jonas", "Ola", "Sam"][Math.floor(r() * 6)] + ", " + (1 + Math.floor(r() * 9)) + " comments",
      category: cats[Math.floor(r() * cats.length)] ?? "Ops",
      time: String(h).padStart(2, "0") + ":" + String(m).padStart(2, "0"),
      status: st[Math.min(3, Math.floor(r() * r() * 5))] ?? "open",
      spark,
    });
  }
  return out;
}

const DL_DEMO = dlDemoRows();

function DlStatus({ s, color }: { s: LedgerRow["status"]; color: string }) {
  return (
    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden className="shrink-0">
      {s === "open" ? <circle cx="5" cy="5" r="3.9" fill="none" stroke={color} strokeWidth="1.3" /> : null}
      {s === "done" ? <circle cx="5" cy="5" r="4.4" fill={color} /> : null}
      {s === "blocked" ? <rect x="1" y="1" width="8" height="8" rx="1.5" fill={color} /> : null}
      {s === "waiting" ? (
        <>
          <circle cx="5" cy="5" r="3.9" fill="none" stroke={color} strokeWidth="1.3" />
          <path d="M5 1.1a3.9 3.9 0 0 1 0 7.8z" fill={color} />
        </>
      ) : null}
    </svg>
  );
}

function dlSpark(values: number[], w: number, h: number) {
  if (values.length < 2) return "";
  let lo = Infinity;
  let hi = -Infinity;
  for (const v of values) {
    lo = Math.min(lo, v);
    hi = Math.max(hi, v);
  }
  const span = hi - lo || 1;
  return values.map((v, i) => ((i / (values.length - 1)) * w).toFixed(1) + "," + (h - ((v - lo) / span) * h).toFixed(1)).join(" ");
}

export interface DensityLedgerProps {
  rows?: LedgerRow[];
  title?: string;
  /** Controlled density (0 airy .. 1 dense). Without it the ledger reads and writes the shared Ultra density. */
  density?: number;
  onDensityChange?: (d: number) => void;
  rowMax?: number;
  rowMin?: number;
  /** The density at which each extra column appears. */
  thresholds?: { spark: number; category: number; time: number; id: number };
  hysteresis?: number;
  ruler?: boolean;
  lamp?: boolean;
  onRowActivate?: (id: string) => void;
  tune?: Partial<UAxes>;
  seed?: Partial<UAxes>;
  className?: string;
}

const DL_THRESHOLDS = { spark: 0.28, category: 0.5, time: 0.68, id: 0.82 };

/**
 * DensityLedger — a list you zoom like a map: pinch, ctrl+wheel, the ruler or [ and ] make rows denser, and the row under your pointer stays put.
 */
export function DensityLedger({
  rows = DL_DEMO,
  title = "Ledger",
  density,
  onDensityChange,
  rowMax = 64,
  rowMin = 22,
  thresholds = DL_THRESHOLDS,
  hysteresis = 0.02,
  ruler = true,
  lamp = true,
  onRowActivate,
  tune,
  seed,
  className = "",
}: DensityLedgerProps) {
  const a = useUltra(tune, undefined, seed);
  const tk = ultraTokens(a);
  const d = uClamp(density ?? a.density);
  const h = Math.round((rowMax - (rowMax - rowMin) * d) * 10) / 10;
  const fs = uLerp(15, 11.5, d);
  const scrollRef = useRef<HTMLDivElement>(null);
  const lampRef = useRef<HTMLDivElement>(null);
  const rulerRef = useRef<HTMLDivElement>(null);
  const live = useRef<{ d: number; h: number; py: number; set: (v: number) => void; pointers: Map<number, { x: number; y: number }>; pinch: number; pinchD: number }>({ d, h, py: -1, set: () => {}, pointers: new Map(), pinch: 0, pinchD: 0 });
  const [lampRow, setLampRow] = useState(-1);
  const [active, setActive] = useState(0);
  const [said, setSaid] = useState("");
  const [shown, setShown] = useState(() => ({ spark: d >= thresholds.spark, category: d >= thresholds.category, time: d >= thresholds.time, id: d >= thresholds.id }));

  // Columns show at their threshold and hide just below it (hysteresis), adjusted during render.
  const next = { ...shown };
  for (const k of ["spark", "category", "time", "id"] as const) {
    if (!next[k] && d >= thresholds[k]) next[k] = true;
    else if (next[k] && d < thresholds[k] - hysteresis) next[k] = false;
  }
  if (next.spark !== shown.spark || next.category !== shown.category || next.time !== shown.time || next.id !== shown.id) setShown(next);

  const setDensity = (v: number) => {
    const c = uClamp(v);
    if (onDensityChange) onDensityChange(c);
    if (density === undefined) setUltra("density", c);
  };

  useEffect(() => {
    live.current.set = setDensity;
  });

  // Keep the row under the pointer (or the middle row) where it is when the rows resize: the list zooms like a map.
  useLayoutEffect(() => {
    const el = scrollRef.current;
    const L = live.current;
    if (el && L.h !== h) {
      const py = L.py >= 0 ? L.py : el.clientHeight / 2;
      el.scrollTop = ((el.scrollTop + py) / L.h) * h - py;
    }
    L.h = h;
    L.d = d;
  }, [h, d]);

  // Announce the density, debounced.
  useEffect(() => {
    const t = window.setTimeout(() => setSaid("Density " + Math.round(d * 100) + " percent, " + Math.round(h) + " pixel rows"), 400);
    return () => window.clearTimeout(t);
  }, [d, h]);

  // ctrl+wheel (and trackpad pinch, which arrives as ctrl+wheel) and touch pinch.
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const L = live.current;
    const onWheel = (e: WheelEvent) => {
      if (!e.ctrlKey) return;
      e.preventDefault();
      const dy = Math.max(-60, Math.min(60, e.deltaY));
      L.set(L.d + dy * 0.0016);
    };
    const onDown = (e: PointerEvent) => {
      if (e.pointerType !== "touch") return;
      L.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
      if (L.pointers.size === 2) {
        const [p, q] = [...L.pointers.values()];
        if (p && q) {
          L.pinch = Math.hypot(p.x - q.x, p.y - q.y) || 1;
          L.pinchD = L.d;
        }
      }
    };
    const onMove = (e: PointerEvent) => {
      if (!L.pointers.has(e.pointerId)) return;
      L.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
      if (L.pointers.size === 2 && L.pinch) {
        const [p, q] = [...L.pointers.values()];
        if (p && q) L.set(L.pinchD - 0.8 * Math.log(Math.hypot(p.x - q.x, p.y - q.y) / L.pinch));
      }
    };
    const onUp = (e: PointerEvent) => {
      L.pointers.delete(e.pointerId);
      if (L.pointers.size < 2) L.pinch = 0;
    };
    el.addEventListener("wheel", onWheel, { passive: false });
    el.addEventListener("pointerdown", onDown);
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerup", onUp);
    el.addEventListener("pointercancel", onUp);
    return () => {
      el.removeEventListener("wheel", onWheel);
      el.removeEventListener("pointerdown", onDown);
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerup", onUp);
      el.removeEventListener("pointercancel", onUp);
    };
  }, []);

  // The row lamp: a lit band under the pointer, written straight to CSS variables.
  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const el = scrollRef.current;
    const lampEl = lampRef.current;
    if (!el) return;
    const box = el.getBoundingClientRect();
    const k = el.offsetWidth ? box.width / el.offsetWidth : 1;
    const py = (e.clientY - box.top) / k;
    const px = (e.clientX - box.left) / k;
    live.current.py = py;
    const row = Math.floor((el.scrollTop + py) / h);
    if (lampEl) {
      lampEl.style.setProperty("--ly", (row * h).toFixed(1) + "px");
      lampEl.style.setProperty("--lx", px.toFixed(0) + "px");
      lampEl.style.opacity = row >= 0 && row < rows.length ? "1" : "0";
    }
    if (row !== lampRow) setLampRow(row);
  };
  const onPointerLeave = () => {
    live.current.py = -1;
    if (lampRef.current) lampRef.current.style.opacity = "0";
    setLampRow(-1);
  };

  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
    const step = e.shiftKey ? 0.16 : 0.04;
    if (e.key === "[") {
      e.preventDefault();
      setDensity(d - step);
      return;
    }
    if (e.key === "]") {
      e.preventDefault();
      setDensity(d + step);
      return;
    }
    if (e.key === "0" && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
      if (density === undefined) setUltra("density", null);
      return;
    }
    const el = scrollRef.current;
    let n = active;
    const page = el ? Math.max(1, Math.floor(el.clientHeight / h) - 1) : 10;
    if (e.key === "ArrowDown") n += 1;
    else if (e.key === "ArrowUp") n -= 1;
    else if (e.key === "PageDown") n += page;
    else if (e.key === "PageUp") n -= page;
    else if (e.key === "Home") n = 0;
    else if (e.key === "End") n = rows.length - 1;
    else if (e.key === "Enter") {
      const r = rows[active];
      if (r && onRowActivate) onRowActivate(r.id);
      return;
    } else return;
    e.preventDefault();
    n = Math.max(0, Math.min(rows.length - 1, n));
    setActive(n);
    const target = el?.querySelector<HTMLElement>('[data-dl-row="' + n + '"]');
    target?.focus({ preventScroll: true });
    if (el) {
      const top = n * h;
      if (top < el.scrollTop) el.scrollTop = top;
      else if (top + h > el.scrollTop + el.clientHeight) el.scrollTop = top + h - el.clientHeight;
      live.current.py = top - el.scrollTop + h / 2;
    }
  };

  // The ruler: 1:1 drag, airy at the top, dense at the bottom.
  const onRulerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
    if (e.button !== 0) return;
    e.preventDefault();
    const el = rulerRef.current;
    if (!el) return;
    const pick = (cy: number) => {
      const box = el.getBoundingClientRect();
      setDensity((cy - box.top - 12) / (box.height - 24));
    };
    pick(e.clientY);
    const pid = e.pointerId;
    const move = (ev: PointerEvent) => {
      if (ev.pointerId === pid) pick(ev.clientY);
    };
    const up = (ev: PointerEvent) => {
      if (ev.pointerId !== pid) return;
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", up);
      window.removeEventListener("pointercancel", up);
    };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
    window.addEventListener("pointercancel", up);
  };
  const onRulerKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {
    const step = e.shiftKey ? 0.16 : 0.04;
    if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "]") setDensity(d + step);
    else if (e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "[") setDensity(d - step);
    else if (e.key === "Home") setDensity(0);
    else if (e.key === "End") setDensity(1);
    else return;
    e.preventDefault();
  };

  const tr = tk.k ? "200ms cubic-bezier(.22,1,.36,1)" : "0ms";
  const cols = [
    "minmax(140px,1fr)",
    shown.spark ? "72px" : "0px",
    shown.category ? "104px" : "0px",
    shown.time ? "56px" : "0px",
    shown.id ? "64px" : "0px",
  ].join(" ");
  const sep = uLerp(0.012, 0.03, a.contrast);
  const zebra = "color-mix(in oklab, " + tk.s2 + " " + Math.round(sep * 2400) + "%, transparent)";
  const hairA = Math.round(tk.edge * 60);
  const tunnel = a.focus >= 0.75 && lampRow >= 0;
  const twoLine = h >= 56;
  const sparkH = Math.max(8, Math.min(20, h - 14));
  const sparkW = 64;
  const pad = Math.round(tk.unit * 5);
  const ticks: number[] = [];
  for (let px = rowMax; px >= rowMin; px -= 6) ticks.push(px);

  return (
    <div
      className={"u-scope @container relative flex h-full w-full flex-col overflow-hidden " + className}
      style={{ ...ultraVars(tk), background: tk.ground, padding: pad, ["--u-row" as string]: h + "px" }}
    >
      <style>{U_CSS + ".u-dl-row:focus-visible{outline-offset:-2px!important}"}</style>
      <div className="flex min-h-0 flex-1 overflow-hidden rounded-[20px]" style={{ background: tk.s1, boxShadow: "inset 0 0 0 1px color-mix(in oklab, " + tk.hair + " " + hairA + "%, transparent)" }}>
        <div className="flex min-w-0 flex-1 flex-col">
          <div className="flex items-baseline justify-between gap-4 px-5 pb-3 pt-4">
            <h3 className="m-0 text-[17px] font-[560] tracking-[-0.012em]" style={{ color: tk.ink1 }}>
              {title}
            </h3>
            <p className="u-num m-0 text-[12.5px] font-medium" style={{ color: tk.ink3 }}>
              {rows.length.toLocaleString("en-US")} rows · {Math.round(h)} px
            </p>
          </div>
          <div
            ref={scrollRef}
            role="grid"
            aria-label={title}
            aria-rowcount={rows.length}
            aria-colcount={6}
            tabIndex={-1}
            onPointerMove={onPointerMove}
            onPointerLeave={onPointerLeave}
            onKeyDown={onKeyDown}
            className="relative min-h-0 flex-1 overflow-y-auto overscroll-contain"
            style={{ scrollbarWidth: "none" }}
          >
            <div className="relative" style={{ height: rows.length * h }}>
              {lamp ? (
                <div
                  ref={lampRef}
                  aria-hidden
                  className="pointer-events-none absolute inset-x-0 top-0"
                  style={{
                    height: "var(--u-row)",
                    transform: "translateY(var(--ly, 0px))",
                    opacity: 0,
                    background: "radial-gradient(360px 100% at var(--lx, 50%) 50%, color-mix(in oklab, " + tk.ink1 + " " + (tk.dark ? 9 : 6) + "%, " + tk.s2 + "), color-mix(in oklab, " + tk.s2 + " 55%, transparent) 62%, transparent 100%)",
                    transition: tk.k ? "transform 120ms cubic-bezier(.22,1,.36,1), opacity 160ms" : "none",
                  }}
                />
              ) : null}
              {rows.map((r, i) => {
                const far = tunnel && Math.abs(i - lampRow) > 3;
                return (
                  <div
                    key={r.id}
                    role="row"
                    aria-rowindex={i + 1}
                    data-dl-row={i}
                    tabIndex={i === active ? 0 : -1}
                    onFocus={() => setActive(i)}
                    onClick={() => onRowActivate?.(r.id)}
                    className="u-dl-row relative grid items-center gap-x-4 px-5"
                    style={{
                      height: "var(--u-row)",
                      gridTemplateColumns: cols,
                      transition: "grid-template-columns " + tr,
                      background: i % 2 ? zebra : "transparent",
                      boxShadow: hairA ? "inset 0 -1px color-mix(in oklab, " + tk.hair + " " + hairA + "%, transparent)" : undefined,
                      fontSize: fs,
                      cursor: onRowActivate ? "pointer" : undefined,
                      contentVisibility: "auto",
                      containIntrinsicSize: "auto " + h + "px",
                    }}
                  >
                    <div role="gridcell" className="flex min-w-0 items-center gap-3">
                      <DlStatus s={r.status} color={far ? tk.ink3 : tk.ink2} />
                      <div className="min-w-0">
                        <p className="m-0 truncate font-medium" style={{ color: far ? tk.ink3 : tk.ink1, lineHeight: 1.2 }}>
                          {r.title}
                          <span className="sr-only">, {r.status}</span>
                        </p>
                        {twoLine && r.subtitle ? (
                          <p className="m-0 mt-0.5 truncate text-[12.5px]" style={{ color: tk.ink3 }}>
                            {r.subtitle}
                          </p>
                        ) : null}
                      </div>
                    </div>
                    {(["spark", "category", "time", "id"] as const).map((c) => (
                      <div key={c} role="gridcell" className="u-num min-w-0 overflow-clip whitespace-nowrap" style={{ opacity: shown[c] ? 1 : 0, transition: "opacity " + tr, color: far ? tk.ink3 : tk.ink2, textAlign: c === "spark" ? "left" : "right" }}>
                        {c === "spark" ? (
                          <svg width={sparkW} height={sparkH} viewBox={"0 0 " + sparkW + " " + sparkH} aria-label={"Trend, last value " + Math.round((r.spark[r.spark.length - 1] ?? 0) * 100)} className="block overflow-visible">
                            <polyline points={dlSpark(r.spark, sparkW, sparkH)} fill="none" stroke={far ? tk.ink3 : tk.ink2} strokeWidth={uLerp(1, 1.75, a.contrast)} strokeLinejoin="round" strokeLinecap="round" />
                          </svg>
                        ) : c === "category" ? (
                          r.category
                        ) : c === "time" ? (
                          r.time
                        ) : (
                          <span style={{ color: tk.ink3 }}>{r.id}</span>
                        )}
                      </div>
                    ))}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        {ruler ? (
          <div
            ref={rulerRef}
            role="slider"
            tabIndex={0}
            aria-label="Row density"
            aria-orientation="vertical"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(d * 100)}
            aria-valuetext={Math.round(h) + " pixel rows"}
            onPointerDown={onRulerDown}
            onKeyDown={onRulerKey}
            className="relative my-4 mr-3 w-7 shrink-0 cursor-ns-resize touch-none select-none rounded-[10px]"
            style={{ background: tk.well }}
          >
            {ticks.map((px) => {
              const t = (rowMax - px) / (rowMax - rowMin);
              return <span key={px} aria-hidden className="absolute right-1.5 h-px" style={{ top: "calc(12px + (100% - 24px) * " + t.toFixed(3) + ")", width: px % 12 === 4 ? 12 : 7, background: tk.ink3, opacity: 0.6 }} />;
            })}
            <span
              aria-hidden
              data-u-live=""
              className="absolute left-1 right-1 z-10 h-[3px] rounded-full"
              style={{ top: "calc(12px + (100% - 24px) * " + d.toFixed(3) + " - 1.5px)", background: tk.ink1 }}
            >
              <span className="u-num pointer-events-none absolute right-[calc(100%+10px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-[8px] px-1.5 py-0.5 text-[11.5px] font-medium" style={{ background: tk.s2, color: tk.ink2 }}>
                {Math.round(h)}
              </span>
            </span>
          </div>
        ) : null}
      </div>
      <p aria-live="polite" className="sr-only">
        {said}
      </p>
    </div>
  );
}