Ultra Pill Nav

"use client";

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

/**
 * UltraPillNav — a floating glass pill that tightens as the page scrolls, with the reader's dial in it.
 *
 * Brand, three links, the Aura Dial glyph and one button. Over the first
 * 120px of scroll the pill narrows by 220px and its glass fills in, read
 * from whatever scrolls it (the window or a scrolling box). The dial opens
 * from the corner (or with U) to retune every Ultra asset on the page. On a
 * phone the links move into a sheet that closes on Escape or an outside tap.
 * Same-page links glide to their section.
 *
* 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),
    // Signature layer: one tempo (0ms at motion 0), the shadow and glow colours, the caught-light edge.
    "--u-dur": (t.k ? Math.round(uLerp(980, 520, (t.k - 190) / 370)) : 0) + "ms",
    "--u-shade": t.dark ? "rgba(0,0,0,.5)" : "rgba(28,32,52,.14)",
    "--u-glow": "color-mix(in oklab, " + t.acc + " " + (t.dark ? 55 : 42) + "%, transparent)",
    "--u-lit": t.dark ? "rgba(255,255,255,.075)" : "rgba(255,255,255,.92)",
    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 signature layer, shared by every Ultra asset and timed by --u-dur
 * (the viewer's motion value; 0ms at motion 0 and under reduced motion, so
 * every entrance lands at once):
 *   .u-rise   a blur-and-rise entrance, staggered by --u-i
 *   .u-draw   a stroke that draws itself in (set pathLength="1")
 *   .u-glass  a lifted surface: tinted gradient, caught-light top edge, soft shadow
 *   .u-lamp   a light and a lit edge that follow the pointer (--mx/--my, set on pointermove)
 *   .u-cta    the page's one goal: an accent glow, a lift and a sheen on hover
 */
const U_FX =
  "@keyframes u-rise{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}}" +
  "@keyframes u-draw{from{stroke-dashoffset:1}}" +
  "@keyframes u-sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}" +
  "@keyframes u-spin{to{transform:rotate(1turn)}}" +
  ".u-scope .u-rise{animation:u-rise var(--u-dur) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--u-i,0) * var(--u-dur) * .09)}" +
  ".u-scope .u-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:u-draw calc(var(--u-dur) * 2) cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--u-i,0) * var(--u-dur) * .05)}" +
  ".u-scope .u-glass{background:linear-gradient(180deg,var(--u-s2),var(--u-s1) 62%);box-shadow:inset 0 1px 0 var(--u-lit),inset 0 0 0 1px color-mix(in oklab,var(--u-hair) calc(16% + var(--u-edge) * 60%),transparent),0 1px 2px var(--u-shade),0 30px 64px -34px var(--u-shade)}" +
  ".u-scope .u-lamp{position:relative;isolation:isolate}" +
  ".u-scope .u-lamp::before,.u-scope .u-lamp::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity calc(var(--u-dur) * .5)}" +
  ".u-scope .u-lamp::before{z-index:-1;background:radial-gradient(var(--u-lamp-r,240px) circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--u-acc) 13%,transparent),transparent 70%)}" +
  ".u-scope .u-lamp::after{padding:1px;background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--u-acc) 85%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}" +
  ".u-scope .u-lamp:hover::before,.u-scope .u-lamp:hover::after{opacity:1}" +
  ".u-scope .u-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px color-mix(in oklab,var(--u-acc) 80%,transparent),0 10px 28px -10px var(--u-glow);transition:transform calc(var(--u-dur) * .45) cubic-bezier(.16,1,.3,1),box-shadow calc(var(--u-dur) * .45)}" +
  ".u-scope .u-cta:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px var(--u-acc),0 16px 40px -10px var(--u-glow)}" +
  ".u-scope .u-cta:active{transform:translateY(0) scale(.98)}" +
  ".u-scope .u-cta::after{content:'';position:absolute;inset:0 auto 0 0;width:42%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-130%) skewX(-18deg)}" +
  ".u-scope .u-cta:hover::after{animation:u-sheen calc(var(--u-dur) * 1.3) cubic-bezier(.16,1,.3,1)}" +
  ".u-scope .u-arr{transition:transform calc(var(--u-dur) * .45) cubic-bezier(.16,1,.3,1)}.u-scope .u-cta:hover .u-arr{transform:translateX(3px)}" +
  "@media (prefers-reduced-motion:reduce){.u-scope .u-rise,.u-scope .u-draw,.u-scope .u-cta::after{animation:none!important}.u-scope .u-cta{transition:none}}";

/**
 * 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}" +
  U_FX;

/**
 * The scrolling box an element lives in: the nearest ancestor that actually
 * scrolls, or null for the window. Resolved on every frame, because a box only
 * becomes a scroller once its content is taller than it.
 */
function uScrollParent(el: Element | null): HTMLElement | null {
  let n = el?.parentElement ?? null;
  while (n && n !== document.body && n !== document.documentElement) {
    const oy = getComputedStyle(n).overflowY;
    if ((oy === "auto" || oy === "scroll" || oy === "overlay") && n.scrollHeight > n.clientHeight + 1) return n;
    n = n.parentElement;
  }
  return null;
}

interface UFrame {
  /** The element's box, in viewport pixels. */
  rect: DOMRect;
  /** The visible part of whatever scrolls it: the scroller's box, or the window. */
  view: { top: number; height: number; left: number; width: number };
}

/**
 * Run `apply` with the element's position whenever anything scrolls or
 * resizes, at most once per frame. One capture-phase scroll listener hears
 * every scroller, so the same section works on a page and inside a scrolling
 * preview. `apply` writes to the DOM; nothing here re-renders React.
 */
function useUScrollFrame<T extends HTMLElement>(ref: RefObject<T | null>, apply: (f: UFrame) => void) {
  const applyRef = useRef(apply);
  useEffect(() => {
    applyRef.current = apply;
  });
  useEffect(() => {
    let raf = 0;
    const run = () => {
      raf = 0;
      const el = ref.current;
      if (!el) return;
      const sp = uScrollParent(el);
      const r = sp ? sp.getBoundingClientRect() : null;
      const view = sp && r ? { top: r.top, height: sp.clientHeight, left: r.left, width: sp.clientWidth } : { top: 0, height: window.innerHeight, left: 0, width: window.innerWidth };
      applyRef.current({ rect: el.getBoundingClientRect(), view });
    };
    const kick = () => {
      if (!raf) raf = requestAnimationFrame(run);
    };
    document.addEventListener("scroll", kick, { capture: true, passive: true });
    window.addEventListener("resize", kick);
    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(kick) : null;
    if (ref.current && ro) ro.observe(ref.current);
    run();
    return () => {
      document.removeEventListener("scroll", kick, { capture: true });
      window.removeEventListener("resize", kick);
      ro?.disconnect();
      if (raf) cancelAnimationFrame(raf);
    };
  }, [ref]);
}

/** Links built from props: https, http, mailto, same-site paths and anchors only (tabs and newlines stripped, backslashes refused). */
function uSafeHref(href: string): string {
  const h = href.replace(/[\t\n\r]/g, "").trim();
  if (!h || h.includes(String.fromCharCode(92))) return "#";
  if (h.startsWith("#") || (h.startsWith("/") && !h.startsWith("//"))) return h;
  return /^(https?:|mailto:)/i.test(h) ? h : "#";
}

/** Scroll whatever scrolls `el` to a same-page anchor; falls back to the browser for anything else. */
function uGo(e: { currentTarget: HTMLAnchorElement; preventDefault: () => void }) {
  const href = e.currentTarget.getAttribute("href") ?? "";
  if (!href.startsWith("#") || href.length < 2) return;
  const root = e.currentTarget.closest("[data-u-site]") ?? document;
  const target = root.querySelector<HTMLElement>('[data-u-anchor="' + href.slice(1) + '"]');
  if (!target) return;
  e.preventDefault();
  const sp = uScrollParent(target);
  const smooth: ScrollBehavior = uStore().snap.motion < 0.02 ? "auto" : "smooth";
  if (sp) sp.scrollTo({ top: sp.scrollTop + target.getBoundingClientRect().top - sp.getBoundingClientRect().top, behavior: smooth });
  else window.scrollTo({ top: window.scrollY + target.getBoundingClientRect().top, behavior: smooth });
}

/** viberdy's V, as a solid mark that takes the current colour. */
function UVMark({ size = 28, className }: { size?: number; className?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden className={className}>
      <rect width="32" height="32" rx="9" fill="currentColor" />
      <path d="M9 10.5 L15.2 22.5 L16.8 22.5 L23 10.5 L19.6 10.5 L16 18.2 L12.4 10.5 Z" fill="var(--u-ground)" />
    </svg>
  );
}

/** The kit's arrow: slides on a .u-cta hover. */
function UArrow() {
  return (
    <svg className="u-arr" width="14" height="14" viewBox="0 0 14 14" aria-hidden>
      <path d="M2 7h9M7.5 3.5L11 7l-3.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

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("");
}

/**
 * The shape the dial draws: eased toward the tuning so a reset or a shared
 * link morphs the hexagon instead of jumping it. Under the hand (hold) and at
 * motion 0 it is the tuning itself.
 */
function useAdEase(target: UAxes, k: number, hold: boolean): UAxes {
  const [shown, setShown] = useState(target);
  const live = useRef({ cur: target, target, k, hold });
  const key = U_AXES.map((ax) => target[ax].toFixed(4)).join(",");
  useEffect(() => {
    live.current.target = target;
    live.current.k = k;
    live.current.hold = hold;
  });
  useEffect(() => {
    const L = live.current;
    let raf = 0;
    let last = 0;
    const step = (now: number) => {
      const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
      last = now;
      const r = 1 - Math.exp((-dt * L.k) / 45);
      const next = { ...L.cur };
      let done = true;
      for (const ax of U_AXES) {
        const d = L.target[ax] - L.cur[ax];
        if (L.hold || !L.k || Math.abs(d) < 0.002) next[ax] = L.target[ax];
        else {
          next[ax] = L.cur[ax] + d * r;
          done = false;
        }
      }
      L.cur = next;
      setShown(next);
      raf = done ? 0 : requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [key, k, hold]);
  return hold || !k ? target : shown;
}

/** The aura's three colours: the accent, an orchid, and a third that runs cool to amber with warmth. */
function adHues(tk: UTokens, warmth: number): [string, string, string] {
  const L = tk.dark ? 0.84 : 0.56;
  return [tk.acc, uHex(uOklch(L, tk.dark ? 0.1 : 0.13, uLerp(305, 345, warmth))), uHex(uOklch(L, tk.dark ? 0.09 : 0.12, uLerp(215, 60, warmth)))];
}

const AD_CSS =
  "@property --u-ad-a{syntax:'<angle>';inherits:false;initial-value:0deg}" +
  "@keyframes u-ad-turn{to{--u-ad-a:1turn}}" +
  "@keyframes u-ad-pulse{from{transform:scale(.7);opacity:.55}to{transform:scale(2.1);opacity:0}}" +
  ".u-ad-glyph{position:relative;transition:transform calc(var(--u-dur) * .45) cubic-bezier(.16,1,.3,1),opacity 160ms}" +
  ".u-ad-glyph:hover{transform:scale(1.06)}" +
  ".u-ad-glyph::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--u-ad-a),var(--u-ad-1),var(--u-ad-2),var(--u-ad-3),var(--u-ad-1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:u-ad-turn calc(var(--u-dur) * 9) linear infinite}" +
  ".u-ad-halo{opacity:0;transition:opacity 200ms}" +
  ".u-ad-v:hover .u-ad-halo,.u-ad-v:focus-visible .u-ad-halo{opacity:.2}" +
  ".u-ad-v[data-grab] .u-ad-halo{opacity:.3}" +
  ".u-ad-pulse{transform-box:fill-box;transform-origin:center;animation:u-ad-pulse calc(var(--u-dur) * 1.8) cubic-bezier(.16,1,.3,1) infinite}" +
  ".u-ad-aura{animation:u-spin calc(var(--u-dur) * 24) linear infinite}" +
  "@media (prefers-reduced-motion:reduce){.u-ad-glyph::before,.u-ad-pulse,.u-ad-aura{animation:none!important}}";

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 v = useAdEase(a, k, grab !== null);
  const [h1, h2, h3] = adHues(tk, a.warmth);
  const morph = k ? "transform 420ms cubic-bezier(.16,1,.3,1), opacity 260ms ease-out, filter 320ms ease-out" : "opacity 120ms linear";
  const gs = Math.max(28, Math.min(48, size * uLerp(1, 0.8, a.density)));
  const gr = (x: number) => gs * (0.13 + 0.3 * x);
  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");
  // The aura behind the shape swells with how far the tuning reaches.
  const reach = U_AXES.reduce((s, ax) => s + v[ax], 0) / 6;
  const hues = { "--u-ad-1": h1, "--u-ad-2": h2, "--u-ad-3": h3 } as CSSProperties;
  const grad = (gid: string) => (
    <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stopColor={h1} />
      <stop offset="0.55" stopColor={h2} />
      <stop offset="1" stopColor={h3} />
    </linearGradient>
  );

  return (
    <div className={"u-scope relative inline-block " + className} style={{ ...ultraVars(tk), ...hues, ...fixedPos, width: gs, height: gs }}>
      <style>{U_CSS + AD_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="u-ad-glyph grid h-full w-full cursor-pointer place-items-center rounded-[30%] p-0"
        style={{ background: tk.s1, border: 0, boxShadow: "inset 0 1px 0 var(--u-lit), 0 8px 22px -10px var(--u-glow)", opacity: open ? 0 : 1 }}
      >
        <svg width={gs} height={gs} viewBox={"0 0 " + gs + " " + gs} aria-hidden>
          <defs>{grad("adgg" + id)}</defs>
          <polygon points={poly((i) => gr(v[U_AXES[i] as UAxis]), gs / 2, gs / 2)} fill={"url(#adgg" + id + ")"} fillOpacity={0.4} stroke={"url(#adgg" + id + ")"} strokeWidth={1.5} strokeLinejoin="round" />
          {U_AXES.map((ax, i) => {
            const [x, y] = adPoint(i, gr(v[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="u-glass absolute overflow-hidden rounded-[28px]"
        style={{
          width: W,
          [corner[0] === "b" ? "bottom" : "top"]: 0,
          [corner[1] === "r" ? "right" : "left"]: 0,
          color: tk.ink1,
          transformOrigin: origin,
          transform: open ? "scale(1)" : "scale(" + (gs / W).toFixed(3) + ")",
          opacity: open ? 1 : 0,
          filter: open || !k ? "none" : "blur(10px)",
          pointerEvents: open ? "auto" : "none",
          visibility: open ? "visible" : "hidden",
          transition: morph + (open ? "" : ", visibility 0s linear 420ms"),
          zIndex: 2,
        }}
      >
        {/* The aura: the dial's three colours turning slowly behind the shape. */}
        <div
          aria-hidden
          className="pointer-events-none absolute"
          style={{ left: CX - 100, top: 48 + CY - 100, width: 200, height: 200, transform: "scale(" + (0.55 + 0.6 * reach).toFixed(3) + ")", transition: k ? "transform 600ms cubic-bezier(.16,1,.3,1)" : undefined }}
        >
          <div className="u-ad-aura h-full w-full rounded-full" style={{ background: "conic-gradient(from 30deg, " + h1 + ", " + h2 + ", " + h3 + ", " + h1 + ")", filter: "blur(34px)", opacity: tk.dark ? 0.3 : 0.38 }} />
        </div>
        <div className="relative 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="relative block touch-none select-none">
          <defs>
            {grad("adg" + id)}
            <radialGradient id={"adw" + id}>
              <stop offset="0" stopColor={tk.ink1} stopOpacity={tk.dark ? 0.07 : 0.05} />
              <stop offset="1" stopColor={tk.ink1} stopOpacity={0} />
            </radialGradient>
            <filter id={"adf" + id} x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="7" />
            </filter>
          </defs>
          <polygon points={poly(() => R, CX, CY)} fill={"url(#adw" + id + ")"} />
          {[0.25, 0.5, 0.75, 1].map((t) => (
            <polygon key={t} points={poly(() => rOf(t), CX, CY)} fill="none" stroke={tk.hair} strokeOpacity={(t === 1 ? 0.45 : 0.22) + 0.35 * tk.edge} strokeWidth={1} strokeDasharray={t === 1 ? undefined : "1.5 4"} />
          ))}
          {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={grab === ax ? h1 : tk.hair} strokeOpacity={grab === ax ? 0.9 : 0.4 + 0.4 * tk.edge} strokeWidth={grab === ax ? 1.5 : 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} />;
          })()}
          {/* The shape, lit: a soft glow of itself underneath, a tinted fill, a gradient edge. */}
          <polygon points={poly((i) => rOf(v[U_AXES[i] as UAxis]), CX, CY)} fill={"url(#adg" + id + ")"} opacity={tk.dark ? 0.8 : 0.55} filter={"url(#adf" + id + ")"} />
          <polygon points={poly((i) => rOf(v[U_AXES[i] as UAxis]), CX, CY)} fill={"url(#adg" + id + ")"} fillOpacity={tk.dark ? 0.3 : 0.28} stroke={"url(#adg" + id + ")"} strokeWidth={1.75} 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={grab === ax ? 600 : 500} fill={grab === ax ? tk.ink1 : tk.ink3} style={{ opacity: quiet ? 0.5 : 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(v[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")}
                data-grab={grab === ax ? "" : undefined}
                className="u-ad-v 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 className="u-ad-halo" cx={x} cy={y} r={13} fill={h1} />
                {grab === ax && k ? <circle className="u-ad-pulse" cx={x} cy={y} r={9} fill="none" stroke={h1} strokeWidth={1.5} /> : null}
                <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, filter: on ? "drop-shadow(0 0 5px " + h1 + ")" : undefined }} />
              </g>
            );
          })}
        </svg>
        <div className="relative 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>
  );
}

export interface UNavLink {
  label: string;
  href: string;
}

const UN_LINKS: UNavLink[] = [
  { label: "Library", href: "/library" },
  { label: "Styles", href: "/styles" },
  { label: "Pricing", href: "/pricing" },
];

const UN_CSS =
  ".u-nav-link{position:relative;padding:8px 12px;border-radius:999px;text-decoration:none;transition:color 160ms,background-color 160ms}" +
  ".u-nav-link:hover{background:color-mix(in oklab,var(--u-ink1) 7%,transparent);color:var(--u-ink1)!important}" +
  ".u-nav-sheet{transform-origin:top right;transition:opacity calc(var(--u-dur) * .4),transform calc(var(--u-dur) * .5) cubic-bezier(.16,1,.3,1),visibility 0s}" +
  ".u-nav-sheet[data-closed]{opacity:0;transform:translateY(-6px) scale(.97);visibility:hidden;pointer-events:none;transition:opacity calc(var(--u-dur) * .3),transform calc(var(--u-dur) * .3),visibility 0s linear calc(var(--u-dur) * .3)}";

export interface UltraPillNavProps {
  brand?: string;
  links?: UNavLink[];
  cta?: { label: string; href: string };
  /** The Aura Dial glyph beside the button (U opens it). */
  dial?: boolean;
  className?: string;
}

/**
 * UltraPillNav — a floating glass pill that tightens as the page scrolls, with the reader's dial in it.
 */
export function UltraPillNav({ brand = "viberdy", links = UN_LINKS, cta = { label: "Get Ultra", href: "#plans" }, dial = true, className = "" }: UltraPillNavProps) {
  const tk = ultraTokens(useUltra());
  const ref = useRef<HTMLElement>(null);
  const [open, setOpen] = useState(false);
  const menuId = useId().replace(/[^a-zA-Z0-9]/g, "");

  // Tighten over the first 120px of scroll: the pill narrows, its glass fills in.
  useUScrollFrame(ref, () => {
    const el = ref.current;
    if (!el) return;
    const sp = uScrollParent(el);
    const y = sp ? sp.scrollTop : window.scrollY;
    el.style.setProperty("--u-nav", uClamp(y / 120).toFixed(3));
  });

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    const onDown = (e: PointerEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onDown);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onDown);
    };
  }, [open]);

  return (
    <nav ref={ref} aria-label="Main" className={"u-scope @container relative w-full " + className} style={{ ...ultraVars(tk), color: tk.ink1, background: "transparent" }}>
      <style>{U_CSS + UN_CSS}</style>
      <div
        className="relative mx-auto flex h-14 items-center gap-2 rounded-full pl-3 pr-2"
        style={{ maxWidth: "calc(1180px - var(--u-nav, 0) * 220px)", transition: tk.k ? "max-width calc(var(--u-dur) * .6) cubic-bezier(.16,1,.3,1)" : undefined }}
      >
        <span aria-hidden className="u-glass pointer-events-none absolute inset-0 rounded-full" style={{ opacity: "calc(0.35 + var(--u-nav, 0) * 0.65)" }} />
        <a href={uSafeHref("/")} className="relative flex items-center gap-2 rounded-full pr-2 text-[16px] font-[620] tracking-[-0.02em] no-underline" style={{ color: tk.ink1 }}>
          <UVMark size={30} />
          {brand}
        </a>
        <div className="relative ml-4 hidden items-center gap-0.5 text-[14px] font-medium @2xl:flex">
          {links.map((l) => (
            <a key={l.href + l.label} href={uSafeHref(l.href)} onClick={uGo} className="u-nav-link" style={{ color: tk.ink2 }}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="relative ml-auto flex items-center gap-2">
          {dial ? <AuraDial size={36} corner="tr" hotkey="u" /> : null}
          <a href={uSafeHref(cta.href)} onClick={uGo} className="u-cta hidden h-10 items-center gap-2 rounded-full px-4 text-[14px] font-medium no-underline @md:inline-flex" style={{ background: tk.acc, color: tk.onAcc }}>
            {cta.label}
            <UArrow />
          </a>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={"un" + menuId}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((o) => !o)}
            className="grid h-10 w-10 cursor-pointer place-items-center rounded-full border-0 @2xl:hidden"
            style={{ background: "color-mix(in oklab, " + tk.ink1 + " 8%, transparent)", color: tk.ink1 }}
          >
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden>
              <path d={open ? "M3.5 3.5l9 9M12.5 3.5l-9 9" : "M2.5 5.5h11M2.5 10.5h11"} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </div>
      <div
        id={"un" + menuId}
        data-closed={open ? undefined : ""}
        className="u-nav-sheet u-glass absolute right-2 top-[calc(100%+8px)] z-10 flex w-[min(320px,calc(100%-16px))] flex-col gap-1 rounded-[24px] p-2 @2xl:hidden"
      >
        {links.map((l) => (
          <a
            key={l.href + l.label}
            href={uSafeHref(l.href)}
            onClick={(e) => {
              setOpen(false);
              uGo(e);
            }}
            className="u-nav-link text-[16px] font-medium"
            style={{ color: tk.ink1, padding: "12px 14px" }}
          >
            {l.label}
          </a>
        ))}
        <a
          href={uSafeHref(cta.href)}
          onClick={(e) => {
            setOpen(false);
            uGo(e);
          }}
          className="u-cta mt-1 inline-flex h-12 items-center justify-center gap-2 rounded-full text-[15px] font-medium no-underline"
          style={{ background: tk.acc, color: tk.onAcc }}
        >
          {cta.label}
          <UArrow />
        </a>
      </div>
    </nav>
  );
}