Aura Dial

"use client";

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

/**
 * AuraDial — your six values as one shape: a hexagon you pull, and the page re-forms under your hand.
 *
 * Closed, it is a 40px glyph: a hexagon whose corners sit at your contrast,
 * warmth, light, density, motion and focus. A hollow corner follows your
 * system and the time of day; a filled one is a value you set. Click it
 * (or press U) and it opens in place into an instrument: drag any corner
 * along its rail and every Ultra asset on the page retunes as you move,
 * with soft detents at the quarters. The light rail is hatched where no
 * text can be read, and a corner released there settles to the nearer
 * safe edge. Double-click a corner (or Backspace) to hand it back to the
 * system. Copy setup puts your values in a link (#u=...), read once by any
 * Ultra page. Use useUltra(), ultraTokens() and ultraVars() to make your own
 * components follow the same tuning.
 *
 * 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.
 */

/** 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"];

/** Pole names, so a value can be read aloud ("Contrast: crisp, 72%"). */
const U_POLES: Record<UAxis, [string, string]> = {
  contrast: ["soft", "crisp"],
  warmth: ["cool", "warm"],
  light: ["dark", "paper"],
  density: ["airy", "dense"],
  motion: ["still", "lively"],
  focus: ["wide", "narrow"],
};

/** 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);
}

/** Forget every pinned value. */
export function resetUltra() {
  const s = uStore();
  s.pinned = {};
  uSave(s);
  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}";

const AD_NAMES: Record<UAxis, string> = {
  contrast: "Contrast",
  warmth: "Warmth",
  light: "Light",
  density: "Density",
  motion: "Motion",
  focus: "Focus",
};

/** Which values the viewer pinned, as a stable string ("contrast,light"); "" on the server. */
function useUltraPinned(): Set<UAxis> {
  const key = useSyncExternalStore(
    uSubscribe,
    () => U_AXES.filter((k) => typeof uStore().pinned[k] === "number").join(","),
    () => "",
  );
  return useMemo(() => new Set((key ? key.split(",") : []) as UAxis[]), [key]);
}

/** A point on axis i of a hexagon (clockwise from 12 o'clock), rounded so server and browser agree. */
function adPoint(i: number, r: number, cx: number, cy: number): [number, number] {
  const a = (-90 + i * 60) * (Math.PI / 180);
  return [Math.round((cx + Math.cos(a) * r) * 100) / 100, Math.round((cy + Math.sin(a) * r) * 100) / 100];
}

function adWord(axis: UAxis, v: number) {
  const [lo, hi] = U_POLES[axis];
  return AD_NAMES[axis] + ": " + (v < 0.5 ? lo : hi) + ", " + Math.round(v * 100) + " percent";
}

/** The share code: one letter per value plus a base-36 digit (#u=c7w3l2d4m5f2). */
function adCode(a: UAxes, pinned: Set<UAxis>) {
  return U_AXES.filter((k) => pinned.has(k))
    .map((k) => k[0] + Math.round(a[k] * 35).toString(36))
    .join("");
}

export interface AuraDialProps {
  /** inline sits in the flow; fixed pins it to a corner of the viewport. */
  placement?: "inline" | "fixed";
  corner?: "br" | "bl" | "tr" | "tl";
  defaultOpen?: boolean;
  /** Toggles the dial when no field is focused; null turns it off. */
  hotkey?: string | null;
  /** Leave out a value the page cannot change (for example light on a page with one polarity). */
  axes?: UAxis[];
  /** The closed glyph's size in px (the panel is 248). */
  size?: number;
  onChange?: (axes: UAxes) => void;
  className?: string;
}

/**
 * AuraDial — your six values as one shape: a hexagon you pull, and the page re-forms under your hand.
 */
export function AuraDial({ placement = "inline", corner = "br", defaultOpen = false, hotkey = "u", axes: show = U_AXES, size = 40, onChange, className = "" }: AuraDialProps) {
  const a = useUltra();
  const tk = ultraTokens(a);
  const pinned = useUltraPinned();
  const [open, setOpen] = useState(defaultOpen);
  const [grab, setGrab] = useState<UAxis | null>(null);
  const [copied, setCopied] = useState(false);
  const btnRef = useRef<HTMLButtonElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const svgRef = useRef<SVGSVGElement>(null);
  const onChangeRef = useRef(onChange);
  const id = useId().replace(/[^a-zA-Z0-9]/g, "");
  const visible = U_AXES.filter((k) => show.includes(k));

  useEffect(() => {
    onChangeRef.current = onChange;
  });

  useEffect(() => {
    if (!hotkey) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() !== hotkey.toLowerCase() || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return;
      const t = e.target as HTMLElement | null;
      if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
      setOpen((o) => !o);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hotkey]);

  const write = (axis: UAxis, v: number | null) => {
    setUltra(axis, v);
    onChangeRef.current?.(uStore().snap);
  };

  // Panel geometry: a 248px plane, the hexagon centred in its top 228px.
  const W = 248;
  const CX = 124;
  const CY = 118;
  const R = 78;
  const R0 = 14;
  const rOf = (v: number) => R0 + (R - R0) * v;

  const fromPointer = (axis: UAxis, clientX: number, clientY: number) => {
    const svg = svgRef.current;
    if (!svg) return 0;
    const box = svg.getBoundingClientRect();
    const k = box.width / W;
    const x = (clientX - box.left) / k - CX;
    const y = (clientY - box.top) / k - CY;
    const i = U_AXES.indexOf(axis);
    const ang = (-90 + i * 60) * (Math.PI / 180);
    const along = x * Math.cos(ang) + y * Math.sin(ang);
    let v = uClamp((along - R0) / (R - R0));
    // Detents at quarters, 0.03 wide.
    for (const d of [0, 0.25, 0.5, 0.75, 1]) if (Math.abs(v - d) < 0.03) v = d;
    return v;
  };

  // The drag follows the pointer anywhere on the page until release (window listeners, so a
  // release off the corner still ends it).
  const onVertexDown = (axis: UAxis) => (e: ReactPointerEvent<SVGGElement>) => {
    if (e.button !== 0) return;
    e.preventDefault();
    setGrab(axis);
    if (e.pointerType === "touch" && typeof navigator.vibrate === "function") navigator.vibrate(4);
    const pid = e.pointerId;
    const move = (ev: PointerEvent) => {
      if (ev.pointerId === pid) write(axis, fromPointer(axis, ev.clientX, ev.clientY));
    };
    const up = (ev: PointerEvent) => {
      if (ev.pointerId !== pid) return;
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", up);
      window.removeEventListener("pointercancel", up);
      setGrab(null);
      if (axis === "light") {
        const raw = uStore().pinned.light;
        if (typeof raw === "number") write("light", uSafeLight(raw));
      }
    };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
    window.addEventListener("pointercancel", up);
  };
  const onVertexKey = (axis: UAxis) => (e: ReactKeyboardEvent<SVGGElement>) => {
    const step = e.shiftKey ? 0.2 : 0.05;
    let v = a[axis];
    if (e.key === "ArrowRight" || e.key === "ArrowUp") v += step;
    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") v -= step;
    else if (e.key === "Home") v = 0;
    else if (e.key === "End") v = 1;
    else if (e.key === "Backspace" || e.key === "Delete") {
      e.preventDefault();
      write(axis, null);
      return;
    } else if (e.key === "Escape") {
      setOpen(false);
      btnRef.current?.focus();
      return;
    } else return;
    e.preventDefault();
    if (axis === "light") {
      const up = v > a.light;
      if (v > U_LIGHT_GAP[0] && v < U_LIGHT_GAP[1]) v = up ? U_LIGHT_GAP[1] : U_LIGHT_GAP[0];
    }
    write(axis, uClamp(v));
  };

  const copy = () => {
    const url = location.origin + location.pathname + location.search + "#u=" + adCode(a, pinned);
    navigator.clipboard?.writeText(url).then(
      () => {
        setCopied(true);
        window.setTimeout(() => setCopied(false), 1600);
      },
      () => {},
    );
  };

  const poly = (r: (i: number) => number, cx: number, cy: number) =>
    U_AXES.map((_, i) => adPoint(i, r(i), cx, cy).join(",")).join(" ");
  const k = tk.k;
  const morph = k ? "transform 320ms cubic-bezier(.22,1,.36,1), opacity 220ms ease-out" : "opacity 120ms linear";
  const edge = "color-mix(in oklab, " + tk.hair + " " + Math.round(30 + 70 * tk.edge) + "%, transparent)";
  const gs = Math.max(28, Math.min(48, size * uLerp(1, 0.8, a.density)));
  const gr = (v: number) => gs * (0.13 + 0.3 * v);
  const fixedPos: CSSProperties =
    placement === "fixed"
      ? { position: "fixed", zIndex: 60, [corner[0] === "b" ? "bottom" : "top"]: 24, [corner[1] === "r" ? "right" : "left"]: 24 }
      : {};
  const origin = (corner[0] === "b" ? "bottom" : "top") + " " + (corner[1] === "r" ? "right" : "left");

  return (
    <div className={"u-scope relative inline-block " + className} style={{ ...ultraVars(tk), ...fixedPos, width: gs, height: gs }}>
      <style>{U_CSS}</style>
      <button
        ref={btnRef}
        type="button"
        aria-expanded={open}
        aria-controls={"ad" + id}
        aria-label="Your tuning: contrast, warmth, light, density, motion and focus"
        onClick={() => setOpen((o) => !o)}
        className="grid h-full w-full cursor-pointer place-items-center rounded-[30%] p-0"
        style={{ background: tk.s1, border: 0, boxShadow: "inset 0 0 0 1px " + edge, opacity: open ? 0 : 1, transition: k ? "opacity 160ms" : undefined }}
      >
        <svg width={gs} height={gs} viewBox={"0 0 " + gs + " " + gs} aria-hidden>
          <polygon points={poly((i) => gr(a[U_AXES[i] as UAxis]), gs / 2, gs / 2)} fill={tk.ink1} fillOpacity={0.12} stroke={tk.ink2} strokeWidth={1.5} strokeLinejoin="round" />
          {U_AXES.map((ax, i) => {
            const [x, y] = adPoint(i, gr(a[ax]), gs / 2, gs / 2);
            return <circle key={ax} cx={x} cy={y} r={1.9} fill={pinned.has(ax) ? tk.ink1 : tk.s1} stroke={tk.ink1} strokeWidth={1.1} />;
          })}
        </svg>
      </button>
      <div
        ref={panelRef}
        id={"ad" + id}
        role="dialog"
        aria-label="Your tuning"
        className="absolute rounded-[28px]"
        style={{
          width: W,
          [corner[0] === "b" ? "bottom" : "top"]: 0,
          [corner[1] === "r" ? "right" : "left"]: 0,
          background: tk.s1,
          color: tk.ink1,
          boxShadow: "0 24px 48px -24px rgba(0,0,0," + (tk.dark ? 0.55 : 0.18) + "), inset 0 0 0 1px " + edge,
          transformOrigin: origin,
          transform: open ? "scale(1)" : "scale(" + (gs / W).toFixed(3) + ")",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          visibility: open ? "visible" : "hidden",
          transition: morph + (open ? "" : ", visibility 0s linear 320ms"),
          zIndex: 2,
        }}
      >
        <div className="flex items-center justify-between px-5 pt-4 text-[12.5px] font-medium" style={{ color: tk.ink3 }}>
          <span>Your tuning</span>
          <button
            type="button"
            onClick={() => {
              setOpen(false);
              btnRef.current?.focus();
            }}
            className="-mr-2 grid h-8 w-8 cursor-pointer place-items-center rounded-full"
            style={{ background: "transparent", border: 0, color: tk.ink2 }}
            aria-label="Close"
          >
            <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden>
              <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
          </button>
        </div>
        <svg ref={svgRef} width={W} height={228} viewBox={"0 0 " + W + " 228"} className="block touch-none select-none">
          {[0.5, 1].map((t) => (
            <polygon key={t} points={poly(() => rOf(t), CX, CY)} fill="none" stroke={tk.hair} strokeOpacity={0.35 + 0.4 * tk.edge} strokeWidth={1} strokeDasharray={t === 0.5 ? "2 4" : undefined} />
          ))}
          {U_AXES.map((ax, i) => {
            const [x0, y0] = adPoint(i, R0, CX, CY);
            const [x1, y1] = adPoint(i, R, CX, CY);
            return <line key={ax} x1={x0} y1={y0} x2={x1} y2={y1} stroke={tk.hair} strokeOpacity={0.45 + 0.4 * tk.edge} strokeWidth={1} />;
          })}
          {/* The band no text survives: the light rail is hatched there. */}
          {(() => {
            const i = U_AXES.indexOf("light");
            const [x0, y0] = adPoint(i, rOf(U_LIGHT_GAP[0]), CX, CY);
            const [x1, y1] = adPoint(i, rOf(U_LIGHT_GAP[1]), CX, CY);
            return <line x1={x0} y1={y0} x2={x1} y2={y1} stroke={tk.ink3} strokeWidth={5} strokeDasharray="1.5 1.5" strokeOpacity={0.7} />;
          })()}
          <polygon points={poly((i) => rOf(a[U_AXES[i] as UAxis]), CX, CY)} fill={tk.ink1} fillOpacity={0.1} stroke={tk.ink1} strokeWidth={1.5} strokeLinejoin="round" />
          {U_AXES.map((ax, i) => {
            const [lx, ly] = adPoint(i, R + 20, CX, CY);
            const quiet = grab !== null && grab !== ax;
            return (
              <text key={ax} x={lx} y={ly + 4} textAnchor="middle" fontSize={11.5} fontWeight={500} fill={grab === ax ? tk.ink1 : tk.ink3} style={{ opacity: quiet ? 0.55 : 1, transition: k ? "opacity 160ms" : undefined }}>
                {grab === ax ? U_POLES[ax][a[ax] < 0.5 ? 0 : 1] + " " + Math.round(a[ax] * 100) : AD_NAMES[ax]}
              </text>
            );
          })}
          {visible.map((ax) => {
            const i = U_AXES.indexOf(ax);
            const [x, y] = adPoint(i, rOf(a[ax]), CX, CY);
            const on = pinned.has(ax);
            const quiet = grab !== null && grab !== ax;
            return (
              <g
                key={ax}
                role="slider"
                tabIndex={open ? 0 : -1}
                aria-label={AD_NAMES[ax]}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-valuenow={Math.round(a[ax] * 100)}
                aria-valuetext={adWord(ax, a[ax]) + (on ? "" : ", following your system")}
                className="cursor-grab outline-none active:cursor-grabbing"
                style={{ opacity: quiet ? 0.45 : 1, transition: k ? "opacity 160ms" : undefined }}
                onPointerDown={onVertexDown(ax)}
                onDoubleClick={() => write(ax, null)}
                onKeyDown={onVertexKey(ax)}
              >
                <circle cx={x} cy={y} r={14} fill="transparent" />
                <circle cx={x} cy={y} r={grab === ax ? 7 : 5.5} fill={on ? tk.ink1 : tk.s1} stroke={tk.ink1} strokeWidth={1.5} style={{ transition: k ? "r 160ms" : undefined }} />
              </g>
            );
          })}
        </svg>
        <div className="flex items-center justify-between gap-2 whitespace-nowrap px-5 pb-4 text-[12px]" style={{ color: tk.ink3 }}>
          <span className="inline-flex items-center gap-1.5">
            <svg width="22" height="8" viewBox="0 0 22 8" aria-hidden>
              <circle cx="4" cy="4" r="3" fill="none" stroke={tk.ink3} strokeWidth="1.2" />
              <circle cx="16" cy="4" r="3" fill={tk.ink3} />
            </svg>
            system / you
          </span>
          <span className="flex items-center gap-3">
            <button type="button" onClick={copy} disabled={pinned.size === 0} className="cursor-pointer p-0 underline decoration-1 underline-offset-4 disabled:cursor-default disabled:no-underline disabled:opacity-50" style={{ background: "none", border: 0, color: tk.ink2, font: "inherit" }}>
              {copied ? "Copied" : "Share"}
            </button>
            <button type="button" onClick={() => { resetUltra(); onChangeRef.current?.(uStore().snap); }} disabled={pinned.size === 0} className="cursor-pointer p-0 underline decoration-1 underline-offset-4 disabled:cursor-default disabled:no-underline disabled:opacity-50" style={{ background: "none", border: 0, color: tk.ink2, font: "inherit" }}>
              Reset
            </button>
          </span>
        </div>
      </div>
    </div>
  );
}