Sula Core

import { clamp01, mix, smoothstep } from "./curves";

/** Brand + views + detached satellite fields + the drip's transient reservoir.
 * The shader loops break on the live count, so headroom here costs nothing per
 * fragment; overflowing it silently drops parts, which is far worse. */
export const MAX_BLOBS = 12;
/** Neighbour bridges while a switch fuses the row, the drip tether on load, and
 * one separation neck per part still pulling away from the body. */
export const MAX_NECKS = 8;

/** A rounded box in canvas space: centre, half-extents, corner radius. */
export interface Blob {
  cx: number;
  cy: number;
  hw: number;
  hh: number;
  r: number;
}

/** A capsule from a to b. Round caps read as surface tension; square ones do not. */
export interface Neck {
  ax: number;
  ay: number;
  bx: number;
  by: number;
  r: number;
  /**
   * How much of the neck's smooth-min bridge is applied, 0 to 1. The visible
   * bridge width is set by the merge radius, not by `r`, so a neck cannot be
   * melted by thinning it; fading strength to 0 recedes the bridge from the
   * surface inward instead, which is the only way it melts without snapping.
   * Absent means a solid bridge (1).
   */
  strength?: number;
}

export interface Field {
  blobs: Blob[];
  necks: Neck[];
  k: number;
}

export interface Rect {
  left: number;
  top: number;
  width: number;
  height: number;
}

/** Default snap distance, as a multiple of the merge radius. */
const BREAK_FACTOR = 0.9;
/** Neck radius at zero separation, as a multiple of the merge radius. A fat neck
 * reads as surface tension; a thin one reads as a stray thread. */
const NECK_THICKNESS = 1.15;
/** Geometric floor for a neck while its field strength melts to zero. The
 * capsule must stay substantial enough to read as a waist; `strength`, not a
 * vanishing radius, owns the continuous attach/detach tail. */
export const NECK_MIN = 1.5;

export function neckBreakDistance(k: number): number {
  return k * BREAK_FACTOR;
}

export function neckRadius(
  distance: number,
  k: number,
  breakDistance: number = neckBreakDistance(k),
): number {
  if (breakDistance <= 0 || distance >= breakDistance) return 0;
  const t = Math.max(0, distance) / breakDistance;
  return k * NECK_THICKNESS * (1 - t) ** 1.1;
}

export function toCanvasSpace(rect: Rect, canvas: Rect): Blob {
  const hw = rect.width / 2;
  const hh = rect.height / 2;
  return {
    cx: rect.left - canvas.left + hw,
    cy: rect.top - canvas.top + hh,
    hw,
    hh,
    r: Math.min(hw, hh),
  };
}

/**
 * Measures each part at its CSS rest position without exposing the temporary
 * transform reset to the next paint. The liquid field owns the inline transform
 * while it animates, but its target geometry must stay transform-free.
 */
export function measureRestBlobs(
  parts: Array<{
    style: { transform: string };
    getBoundingClientRect(): Rect;
  }>,
  canvas: Rect,
): Blob[] {
  const transforms = parts.map((part) => part.style.transform);
  for (const part of parts) part.style.transform = "";
  try {
    return parts.map((part) =>
      toCanvasSpace(part.getBoundingClientRect(), canvas),
    );
  } finally {
    for (const [index, part] of parts.entries()) {
      part.style.transform = transforms[index] ?? "";
    }
  }
}

export function lerpBlob(a: Blob, b: Blob, t: number): Blob {
  return {
    cx: mix(a.cx, b.cx, t),
    cy: mix(a.cy, b.cy, t),
    hw: mix(a.hw, b.hw, t),
    hh: mix(a.hh, b.hh, t),
    r: mix(a.r, b.r, t),
  };
}

/**
 * A spring hands back values past 1. Position may overshoot, because that is the
 * bounce; half-extents may not, because a blob wider than its DOM box paints
 * glass out from under the text.
 */
export function springToBlob(from: Blob, to: Blob, s: number): Blob {
  const clamped = Math.min(1, Math.max(0, s));
  return {
    cx: mix(from.cx, to.cx, s),
    cy: mix(from.cy, to.cy, s),
    hw: mix(from.hw, to.hw, clamped),
    hh: mix(from.hh, to.hh, clamped),
    r: mix(from.r, to.r, clamped),
  };
}

/** How far past the merge radius the goo will still bridge two neighbours. */
export const BRIDGE_REACH = 1.6;
/** Merge at or past this holds the bridge at full strength. Holding a partial
 * strength recedes the bridge into two sharp cusps (the mix of a thin capsule
 * into the round surface never crosses zero mid-gap), so a standing rest pull
 * must be a full-strength smooth-min; only a transient melt may fade below. */
const BRIDGE_FULL = 0.3;

/** The blob's surface reach from its centre along a direction, exact for a
 * rounded box: the core box support plus the corner radius. */
function supportAlong(b: Blob, ux: number, uy: number): number {
  return Math.abs(ux) * (b.hw - b.r) + Math.abs(uy) * (b.hh - b.r) + b.r;
}

/**
 * Surface-tension bridges between adjacent blobs, in whatever direction the pair
 * sits: each neck runs centre-to-centre along the pair's own axis, from surface
 * to surface. Thickness grows with `merge` (REST at rest, 1 at the peak of a
 * transition) and with how close the two sit, so near pairs join in a soft
 * concave waist. At the edge of the reach the capsule holds its geometric floor
 * while its field strength eases from zero, matching the same melt used by
 * authored Sula necks: approaching bodies reach toward each other before joining,
 * and separating bodies flow back into themselves instead of losing a whole neck
 * in one frame. Blobs must be handed in adjacency order.
 */
export function bridgeNecks(blobs: Blob[], k: number, merge: number): Neck[] {
  const m = clamp01(merge);
  if (m <= 0.001 || k <= 0) return [];
  const reach = k * BRIDGE_REACH;
  const necks: Neck[] = [];
  for (let i = 0; i < blobs.length - 1; i++) {
    const a = blobs[i] as Blob;
    const b = blobs[i + 1] as Blob;
    const dx = b.cx - a.cx;
    const dy = b.cy - a.cy;
    const dist = Math.hypot(dx, dy) || 1;
    const ux = dx / dist;
    const uy = dy / dist;
    const supA = supportAlong(a, ux, uy);
    const supB = supportAlong(b, ux, uy);
    const gap = dist - supA - supB;
    if (gap > reach) continue;
    const closeness = 1 - clamp01(Math.max(gap, 0) / reach);
    const base = Math.min(a.hw, a.hh, b.hw, b.hh);
    const thickness = base * mix(0.25, 0.9, m) * closeness;
    const mergeStrength = smoothstep(0, BRIDGE_FULL, m);
    const distanceStrength = smoothstep(0, BRIDGE_FULL, closeness);
    necks.push({
      ax: a.cx + ux * supA,
      ay: a.cy + uy * supA,
      bx: b.cx - ux * supB,
      by: b.cy - uy * supB,
      r: Math.max(thickness, NECK_MIN),
      strength: mergeStrength * distanceStrength,
    });
  }
  return necks;
}

export function activePillRect(
  items: Blob[],
  activeIndex: number,
): Blob | null {
  return items[activeIndex] ?? null;
}

/**
 * Position and size move on separate clocks. The whole row glides to its new
 * layout on one shared `posT` so it stays coherent and never tears a gap, while
 * each part's width follows its own staggered `sizeT` so a collapsing bar can
 * shed width fast without the row lagging behind it.
 */
export function morphBlob(
  from: Blob,
  to: Blob,
  posT: number,
  sizeT: number,
): Blob {
  return {
    cx: mix(from.cx, to.cx, posT),
    cy: mix(from.cy, to.cy, posT),
    hw: mix(from.hw, to.hw, sizeT),
    hh: mix(from.hh, to.hh, sizeT),
    r: mix(from.r, to.r, sizeT),
  };
}

/**
 * True when any part moved or resized past the tolerance. A webfont swap or
 * rounding jitter re-measures within it, and applying that would twitch a bar
 * that already looks settled.
 */
export function restDiffers(a: Blob[], b: Blob[], eps = 0.5): boolean {
  if (a.length !== b.length) return true;
  return a.some((blob, i) => {
    const other = b[i];
    if (!other) return true;
    return (
      Math.abs(blob.cx - other.cx) > eps ||
      Math.abs(blob.cy - other.cy) > eps ||
      Math.abs(blob.hw - other.hw) > eps ||
      Math.abs(blob.hh - other.hh) > eps
    );
  });
}

/** Radius of the cursor wave in CSS px. Broad enough to bend a section of a long
 * pill, while remaining local enough that neighbouring parts stay calm. */
const HOVER_SPREAD = 90;

export interface PackedHover {
  point: [number, number];
  amount: number;
  spread: number;
}

/** Flattens the hover focus the way packUniforms does: device px, Y flipped. */
export function packHover(
  blob: Blob,
  amount: number,
  dpr: number,
  canvasHeight: number,
  point?: { x: number; y: number },
): PackedHover {
  const focus = point ?? { x: blob.cx, y: blob.cy };
  return {
    point: [focus.x * dpr, (canvasHeight - focus.y) * dpr],
    amount: amount * dpr,
    spread: HOVER_SPREAD * dpr,
  };
}

export interface PackedField {
  blobs: number[];
  radii: number[];
  necks: number[];
  neckRadii: number[];
  neckStrengths: number[];
  blobCount: number;
  neckCount: number;
}

/**
 * Flattens to device pixels and flips Y, because `gl_FragCoord` counts up from the
 * bottom. These stay plain arrays, not Float32Arrays: ogl gates array uniforms on
 * `Array.isArray`, and a typed array fails it and uploads nothing at all.
 */
export function packUniforms(
  field: Field,
  dpr: number,
  canvasHeight: number,
): PackedField {
  const blobs = new Array<number>(MAX_BLOBS * 4).fill(0);
  const radii = new Array<number>(MAX_BLOBS).fill(0);
  const necks = new Array<number>(MAX_NECKS * 4).fill(0);
  const neckRadii = new Array<number>(MAX_NECKS).fill(0);
  const neckStrengths = new Array<number>(MAX_NECKS).fill(0);

  const blobCount = Math.min(field.blobs.length, MAX_BLOBS);
  for (let i = 0; i < blobCount; i++) {
    const b = field.blobs[i] as Blob;
    blobs[i * 4] = b.cx * dpr;
    blobs[i * 4 + 1] = (canvasHeight - b.cy) * dpr;
    blobs[i * 4 + 2] = b.hw * dpr;
    blobs[i * 4 + 3] = b.hh * dpr;
    radii[i] = b.r * dpr;
  }

  const neckCount = Math.min(field.necks.length, MAX_NECKS);
  for (let i = 0; i < neckCount; i++) {
    const n = field.necks[i] as Neck;
    necks[i * 4] = n.ax * dpr;
    necks[i * 4 + 1] = (canvasHeight - n.ay) * dpr;
    necks[i * 4 + 2] = n.bx * dpr;
    necks[i * 4 + 3] = (canvasHeight - n.by) * dpr;
    neckRadii[i] = n.r * dpr;
    neckStrengths[i] = n.strength ?? 1;
  }

  return {
    blobs,
    radii,
    necks,
    neckRadii,
    neckStrengths,
    blobCount,
    neckCount,
  };
}

export interface PauseGateOptions {
  /** The element whose visibility decides whether the surface may draw. */
  target: Element;
  /** Runs when the surface goes offscreen or the tab is hidden. */
  onPause: () => void;
  /** Runs when it comes back. */
  onResume: () => void;
  /**
   * Slack around the viewport before a surface counts as gone. Chrome like a nav
   * sits at the very edge of the viewport and a stricter test would park it while
   * it is still in front of the reader, so any overlap at all counts as visible
   * and this margin keeps a hair of hysteresis around that.
   */
  margin?: string;
}

export interface PauseGate {
  /** False while the surface is offscreen or the tab is hidden. */
  awake(): boolean;
  dispose(): void;
}

const DEFAULT_MARGIN = "20%";

/**
 * The one place a Sula surface decides whether it is allowed to draw. Every
 * surface parks its own loop on idle, but idle is not the same as unseen: a
 * hovered nav, a live switch or a standing ambient loop will happily burn frames
 * in a background tab. The gate is the shared answer, so a new surface inherits
 * it by construction rather than by remembering to bolt an observer on.
 *
 * It reports transitions only, never the current frame's state, so a resume
 * hands control back to a loop that picks up from its live values: nothing here
 * rewinds a choreography.
 */
export function createPauseGate(options: PauseGateOptions): PauseGate {
  const { target, onPause, onResume, margin = DEFAULT_MARGIN } = options;

  let onScreen = true;
  let awake = true;

  const sync = () => {
    const next = onScreen && !isHidden();
    if (next === awake) return;
    awake = next;
    if (next) onResume();
    else onPause();
  };

  const io =
    typeof IntersectionObserver === "undefined"
      ? null
      : new IntersectionObserver(
          (entries) => {
            onScreen = entries[entries.length - 1]?.isIntersecting ?? true;
            sync();
          },
          { rootMargin: margin },
        );
  io?.observe(target);

  const onVisibility = () => sync();
  if (typeof document !== "undefined") {
    document.addEventListener("visibilitychange", onVisibility);
  }

  return {
    awake: () => awake,
    dispose() {
      io?.disconnect();
      if (typeof document !== "undefined") {
        document.removeEventListener("visibilitychange", onVisibility);
      }
    },
  };
}

function isHidden(): boolean {
  return typeof document !== "undefined" && document.hidden;
}

import { MAX_BLOBS, MAX_NECKS } from "./geometry";

export const vertexShader = `#version 300 es
in vec2 position;
void main() { gl_Position = vec4(position, 0.0, 1.0); }
`;

/**
 * The field is signed distance, not a density sum: exact rounded pills merged with
 * a polynomial smooth-min (Inigo Quilez, MIT). A density kernel makes round balls,
 * and the nav needs pills of a given width.
 *
 * The surface normal comes from screen-space derivatives rather than a central
 * difference, which would cost four more field() evaluations per fragment, and
 * field() is a loop of smooth-mins. They must stay outside every branch, because
 * derivatives require uniform control flow.
 *
 * The chromatic fringe shifts the isoline per channel instead of resampling: d is
 * already a distance, so the offset is a first-order step along the normal.
 */
export const fragmentShader = `#version 300 es
precision highp float;

uniform float uTime;
uniform int uBlobCount;
uniform vec4 uBlobs[${MAX_BLOBS}];
uniform float uRadius[${MAX_BLOBS}];
uniform int uNeckCount;
uniform vec4 uNecks[${MAX_NECKS}];
uniform float uNeckR[${MAX_NECKS}];
uniform float uNeckStr[${MAX_NECKS}];
uniform float uK;
uniform vec3 uTint;
uniform vec3 uBackdrop;
uniform vec3 uAccent;
uniform float uAlpha;
uniform float uWobble;
uniform float uShine;
uniform float uDpr;
uniform vec2 uHoverPoint;
uniform float uHoverAmt;
uniform float uHoverSpread;

out vec4 outColor;

float sdRoundBox(vec2 p, vec2 b, float r){
  vec2 q = abs(p) - b + r;
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}

float sdSegment(vec2 p, vec2 a, vec2 b, float r){
  vec2 pa = p - a, ba = b - a;
  float denom = max(dot(ba, ba), 1e-4);
  float h = clamp(dot(pa, ba) / denom, 0.0, 1.0);
  return length(pa - ba * h) - r;
}

float smin(float a, float b, float k){
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float field(vec2 p){
  float d = 1e5;
  for (int i = 0; i < ${MAX_BLOBS}; i++) {
    if (i >= uBlobCount) break;
    d = smin(d, sdRoundBox(p - uBlobs[i].xy, uBlobs[i].zw, uRadius[i]), uK);
  }
  for (int i = 0; i < ${MAX_NECKS}; i++) {
    if (i >= uNeckCount) break;
    float sd = sdSegment(p, uNecks[i].xy, uNecks[i].zw, uNeckR[i]);
    d = mix(d, smin(d, sd, uK), clamp(uNeckStr[i], 0.0, 1.0));
  }
  /* Two long travelling waves replace value noise: the edge bends in coherent
     runs instead of accumulating small random bumps. Work in CSS pixels so the
     wavelength stays the same on standard and retina displays. */
  vec2 cssP = p / max(uDpr, 1.0);
  float flow = sin(cssP.x * 0.024 + uTime * 1.25) * 0.62
             + sin((cssP.x + cssP.y) * 0.012 - uTime * 0.8) * 0.38;

  /* Hover follows the live pointer with a broad elliptical falloff. Its target
     position is eased on the CPU, so quick cursor movement pushes a responsive
     wave through the surface without teleporting the deformation. */
  vec2 delta = p - uHoverPoint;
  vec2 local = delta / vec2(max(uHoverSpread * 1.25, 1.0), max(uHoverSpread, 1.0));
  float hoverFall = exp(-dot(local, local) * 2.4);
  vec2 cssDelta = delta / max(uDpr, 1.0);
  float cursorWave = sin(cssDelta.x * 0.042 - uTime * 2.2) * 0.72
                   + sin((cssDelta.x + cssDelta.y) * 0.021 + uTime * 1.1) * 0.28;
  return d + flow * uWobble + cursorWave * uHoverAmt * hoverFall;
}

void main(){
  vec2 p = gl_FragCoord.xy;
  float d = field(p);

  float aa = max(fwidth(d), 1e-4);
  float alpha = 1.0 - smoothstep(-aa, aa, d);

  vec2 g = vec2(dFdx(d), dFdy(d));
  vec2 n = length(g) > 1e-5 ? normalize(g) : vec2(0.0, 1.0);

  /* Curvature: how fast the surface normal turns across one pixel. It is near
     zero on the flat flank of a large blob and spikes at necks, cusps and small
     beads, so surface tension lights up brightest exactly where the goo is
     pinching. Scaled by uK so a fat-merge field and a tight one read alike. */
  float curv = clamp(
    (abs(dFdx(n.x)) + abs(dFdy(n.x)) + abs(dFdx(n.y)) + abs(dFdy(n.y)))
      * uK * 0.6,
    0.0, 1.2);

  float rim = smoothstep(-11.0, 0.0, d) * alpha;
  float fres = pow(1.0 - abs(dot(n, vec2(0.0, 1.0))), 3.0);
  float spec = pow(max(dot(n, normalize(vec2(0.35, 0.94))), 0.0), 18.0);
  float hairline = exp(-pow((d + 1.1) / 1.4, 2.0)) * alpha;
  /* A broader inner band the curvature glow bleeds into, so a lit neck reads as
     a soft waist of light rather than a single-pixel wire. */
  float edge = exp(-pow((d + 2.4) / 2.8, 2.0)) * alpha;

  vec3 glass = mix(uBackdrop, uTint, 0.92);
  glass += uAccent * (fres * 0.22 + spec * 0.5) * (1.0 + curv * 0.8) * rim * uShine;
  glass += uAccent * (0.16 + curv * 1.0) * hairline * uShine;
  glass += uAccent * curv * edge * 0.55 * uShine;
  glass += vec3(0.05) * mix(0.3, 1.0, uShine) * hairline;

  vec3 chroma = vec3(
    1.0 - smoothstep(-aa, aa, d - 0.8),
    alpha,
    1.0 - smoothstep(-aa, aa, d + 0.8)
  );
  glass = mix(glass, glass * chroma, rim * 0.5 * uShine);

  outColor = vec4(glass, alpha * uAlpha);
}
`;

import { Mesh, Program, Renderer, Triangle } from "ogl";
import {
  MAX_BLOBS,
  MAX_NECKS,
  type PackedField,
  type PackedHover,
} from "./geometry";
import { fragmentShader, vertexShader } from "./shader";

export type Rgb = [number, number, number];

export interface FieldColors {
  tint: Rgb;
  backdrop: Rgb;
  accent: Rgb;
  /** 0 keeps the glass flat and matte, 1 is the full neon rim. */
  shine: number;
}

/**
 * Relative luminance of the surface the glass floats on. A dark theme wants the
 * full glow; a pale one would only look garish, so its shine is dialled down.
 */
export function shineForBackdrop(backdrop: Rgb): number {
  const [r, g, b] = backdrop;
  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  return 0.32 + 0.68 * (1 - luminance) ** 1.4;
}

/**
 * Pulls a fill off the backdrop toward the accent hue and up in lightness, so an
 * actor blob reads as violet-charcoal glass rather than a bg-adjacent grey lump.
 * `amount` biases toward the accent; the small lift raises absolute lightness so
 * even a dark accent still separates from a near-black bg.
 */
export function liftTint(
  tint: Rgb,
  accent: Rgb,
  amount = 0.18,
  lift = 0.03,
): Rgb {
  const clamp = (v: number) => Math.min(1, Math.max(0, v));
  return [
    clamp(tint[0] + (accent[0] - tint[0]) * amount + lift),
    clamp(tint[1] + (accent[1] - tint[1]) * amount + lift),
    clamp(tint[2] + (accent[2] - tint[2]) * amount + lift),
  ];
}

export interface FieldFrame {
  packed: PackedField;
  k: number;
  time: number;
  wobble: number;
  alpha: number;
  /** Localized hover ripple around one blob; null leaves the field calm. */
  hover?: PackedHover | null;
  /** false composites this frame over the last without clearing, so a back and a
   * front pass can share one context and one canvas. Defaults to true. */
  clear?: boolean;
}

export interface NavField {
  resize(width: number, height: number, dpr: number): void;
  setColors(colors: FieldColors): void;
  draw(frame: FieldFrame): void;
  dispose(): void;
}

const FALLBACK: Rgb = [0, 0, 0];

/**
 * A canvas cannot sample the page behind it, so every colour the glass needs has
 * to be handed to the shader as a number. Tokens are authored in oklch, and the
 * only reliable way to turn any CSS colour string into channels is to paint it.
 */
export function resolveColor(value: string): Rgb {
  if (typeof document === "undefined") return FALLBACK;
  try {
    const canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (!ctx) return FALLBACK;
    ctx.fillStyle = value;
    ctx.fillRect(0, 0, 1, 1);
    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
    return [(r ?? 0) / 255, (g ?? 0) / 255, (b ?? 0) / 255];
  } catch {
    return FALLBACK;
  }
}

export interface CreateFieldOptions {
  canvas: HTMLCanvasElement;
  colors: FieldColors;
  onContextLost?: () => void;
}

export function createField(options: CreateFieldOptions): NavField | null {
  const { canvas, colors, onContextLost } = options;

  let renderer: Renderer;
  try {
    renderer = new Renderer({
      canvas,
      webgl: 2,
      dpr: 1,
      alpha: true,
      premultipliedAlpha: false,
      antialias: false,
    });
  } catch {
    return null;
  }

  const gl = renderer.gl;
  if (!("drawBuffers" in gl)) return null;
  gl.clearColor(0, 0, 0, 0);

  const program = new Program(gl, {
    vertex: vertexShader,
    fragment: fragmentShader,
    transparent: true,
    depthTest: false,
    uniforms: {
      uTime: { value: 0 },
      uBlobCount: { value: 0 },
      uBlobs: { value: new Array<number>(MAX_BLOBS * 4).fill(0) },
      uRadius: { value: new Array<number>(MAX_BLOBS).fill(0) },
      uNeckCount: { value: 0 },
      uNecks: { value: new Array<number>(MAX_NECKS * 4).fill(0) },
      uNeckR: { value: new Array<number>(MAX_NECKS).fill(0) },
      uNeckStr: { value: new Array<number>(MAX_NECKS).fill(0) },
      uK: { value: 14 },
      uTint: { value: colors.tint },
      uBackdrop: { value: colors.backdrop },
      uAccent: { value: colors.accent },
      uAlpha: { value: 1 },
      uWobble: { value: 0 },
      uShine: { value: colors.shine },
      uDpr: { value: 1 },
      uHoverPoint: { value: [0, 0] },
      uHoverAmt: { value: 0 },
      uHoverSpread: { value: 1 },
    },
  });
  const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
  const u = program.uniforms;

  const handleLost = (event: Event) => {
    event.preventDefault();
    onContextLost?.();
  };
  canvas.addEventListener("webglcontextlost", handleLost);

  return {
    resize(width, height, dpr) {
      u.uDpr.value = dpr;
      renderer.dpr = dpr;
      renderer.setSize(width, height);
    },
    setColors(next) {
      u.uTint.value = next.tint;
      u.uBackdrop.value = next.backdrop;
      u.uAccent.value = next.accent;
      u.uShine.value = next.shine;
    },
    draw({ packed, k, time, wobble, alpha, hover, clear }) {
      u.uTime.value = time;
      u.uK.value = k;
      u.uWobble.value = wobble;
      u.uAlpha.value = alpha;
      u.uHoverPoint.value = hover?.point ?? [0, 0];
      u.uHoverAmt.value = hover?.amount ?? 0;
      u.uHoverSpread.value = hover?.spread ?? 1;
      u.uBlobCount.value = packed.blobCount;
      u.uBlobs.value = packed.blobs;
      u.uRadius.value = packed.radii;
      u.uNeckCount.value = packed.neckCount;
      u.uNecks.value = packed.necks;
      u.uNeckR.value = packed.neckRadii;
      u.uNeckStr.value = packed.neckStrengths;
      /* A back pass renders first and clears; a front pass rides over it with
       * clear=false so the two glass layers alpha-composite in one context. */
      renderer.autoClear = clear ?? true;
      renderer.render({ scene: mesh });
    },
    dispose() {
      canvas.removeEventListener("webglcontextlost", handleLost);
      program.remove();
      mesh.geometry.remove();
    },
  };
}

import { c1Settle, clamp01, mix, smoothstep } from "./curves";
import { type Blob, NECK_MIN, type Neck } from "./geometry";

export interface EmergeOptions {
  swellEnd?: number;
  travelStart?: number;
  pinchStart?: number;
  pinchEnd?: number;
  startScale?: number;
}

/**
 * A droplet separating from a parent blob and settling at a target: it swells out
 * while still absorbed, then travels trailing a neck that thins and pinches. `t`
 * is 0 (absorbed in the parent) to 1 (settled at target). Travel runs through
 * c1Settle so an underdamped spring lands it with a settle wobble rather than a
 * hard stop; raw t past 1 overshoots position, not size.
 *
 * Generalizes the nav's `revealSide` from its bar/side axis to any parent->target
 * vector: the travel axis is the unit vector between centres, so a droplet can
 * emerge in any direction rather than only along x.
 */
export function emergeDroplet(
  parent: Blob,
  target: Blob,
  t: number,
  options: EmergeOptions = {},
): { blob: Blob; neck: Neck | null } {
  const {
    swellEnd = 0.36,
    travelStart = 0.3,
    pinchStart = 0.84,
    pinchEnd = 0.94,
    startScale = 0.5,
  } = options;

  const p = clamp01(t);

  const dx = target.cx - parent.cx;
  const dy = target.cy - parent.cy;
  const dist = Math.hypot(dx, dy) || 1;
  const ux = dx / dist;
  const uy = dy / dist;

  const swell = smoothstep(0, swellEnd, p);
  /* Travel reaches the rest line at t=1 still moving (slope 1), so an underdamped
   * spring carries a small settle wobble past the line and back instead of the
   * droplet landing hard. Raw t, not clamped p, so the overshoot is not flattened. */
  const travel = c1Settle(t, travelStart);
  const pinch = smoothstep(pinchStart, pinchEnd, p);

  const scale = mix(startScale, 1, swell);
  const hw = target.hw * scale;
  const hh = target.hh * scale;

  /* The parent's box boundary along the travel axis, and a start point pulled
   * just inside it so the droplet is absorbed at rest. */
  const edgeX = parent.cx + ux * parent.hw;
  const edgeY = parent.cy + uy * parent.hh;
  const back = Math.abs(ux) * target.hw + Math.abs(uy) * target.hh;
  const startX = edgeX - ux * back * 0.62;
  const startY = edgeY - uy * back * 0.62;

  const cx = mix(startX, target.cx, travel);
  const cy = mix(startY, target.cy, travel);
  const blob: Blob = { cx, cy, hw, hh, r: Math.min(hw, hh) };

  if (p >= pinchEnd || travel <= 0) return { blob, neck: null };

  const trailX = cx - ux * hw;
  const trailY = cy - uy * hh;
  const r = Math.max(target.hh * mix(0.86, 0.08, pinch), NECK_MIN);
  const neck: Neck = {
    ax: edgeX,
    ay: edgeY,
    bx: trailX,
    by: trailY,
    r,
    strength: 1 - pinch,
  };
  return { blob, neck };
}

export const borderVertexShader = `#version 300 es
in vec2 position;
void main() { gl_Position = vec4(position, 0.0, 1.0); }
`;

/** How many pointer blobs the ring can smooth-union at once. The cursor is one;
 * the slot for a second keeps the door open for an eased trailing blob without
 * touching the shader. */
export const MAX_FRAME_BLOBS = 2;

/**
 * The frame is signed distance, not a density sum: an exact rounded-box ring
 * (`abs(win) - thickness`) with the pointer merged in by the same polynomial
 * smooth-min the fill field uses. This is the clean-room answer to LiquidBorder's
 * density-summed metaball, so the two share no technique.
 *
 * Lighting reuses the fill path's vocabulary: curvature-keyed accent rim, a
 * fresnel-ish flank, a directional shine, and a hairline core.
 */
export const borderFragmentShader = `#version 300 es
precision highp float;

uniform float uTime;
uniform vec2 uCenter;
uniform vec2 uHalf;
uniform float uRadius;
uniform float uThickness;
uniform float uWobble;
uniform float uEnergy;
uniform float uSweep;
uniform float uDpr;
uniform int uBlobCount;
uniform vec4 uBlobs[${MAX_FRAME_BLOBS}];
uniform float uBlobK;
uniform vec3 uTint;
uniform vec3 uBackdrop;
uniform vec3 uAccent;
uniform float uShine;
uniform float uIntro;

out vec4 outColor;

float sdRoundBox(vec2 p, vec2 b, float r){
  vec2 q = abs(p) - b + r;
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}

float smin(float a, float b, float k){
  float h = clamp(0.5 + 0.5 * (b - a) / max(k, 1e-4), 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float ringField(vec2 p){
  vec2 q = p - uCenter;
  float win = sdRoundBox(q, uHalf, uRadius);

  /* Two long travelling waves bend the edge in coherent runs. Measured in CSS
     pixels so the wavelength holds on retina, and scaled by the live energy so
     the ring is a still faint band at rest. */
  vec2 cssP = p / max(uDpr, 1.0);
  float introTurbulence = 1.0 + (1.0 - uIntro) * 2.2;
  float flow = sin(cssP.x * 0.020 + uTime * 1.10) * 0.60
             + sin((cssP.x + cssP.y) * 0.011 - uTime * 0.70) * 0.40;
  win += flow * uWobble * introTurbulence;

  /* Material occupies the outside of the rounded window, including the canvas
     corners. During intro its inner front travels from the canvas edge to the
     final border instead of fading a fully formed ring. */
  float edgeInset = max(min(uCenter.x - uHalf.x, uCenter.y - uHalf.y), 0.0);
  float front = mix(edgeInset, -uThickness, uIntro);
  float d = front - win;

  /* The pointer disc is smooth-union'd into the band, so the nearest edge necks
     and bulges toward the cursor. Its strength is gated on the CPU by how close
     the cursor sits to the ring, so it never reads as a dot in open space. */
  for (int i = 0; i < ${MAX_FRAME_BLOBS}; i++) {
    if (i >= uBlobCount) break;
    vec4 b = uBlobs[i];
    float disc = length(p - b.xy) - b.z;
    d = mix(d, smin(d, disc, uBlobK), clamp(b.w, 0.0, 1.0));
  }
  return d;
}

void main(){
  vec2 p = gl_FragCoord.xy;
  float d = ringField(p);

  float dCss = d / max(uDpr, 1.0);
  float aa = max(fwidth(d), 0.75 * uDpr);
  float alpha = 1.0 - smoothstep(-aa, aa, d);

  vec2 g = vec2(dFdx(d), dFdy(d));
  vec2 n = length(g) > 1e-5 ? normalize(g) : vec2(0.0, 1.0);

  float curv = clamp(
    (abs(dFdx(n.x)) + abs(dFdy(n.x)) + abs(dFdx(n.y)) + abs(dFdy(n.y)))
      * uBlobK * 0.6,
    0.0, 1.2);

  float rim = smoothstep(-3.0, 0.0, dCss) * alpha;
  float fres = pow(1.0 - abs(dot(n, vec2(0.0, 1.0))), 3.0);
  float spec = pow(max(dot(n, normalize(vec2(0.35, 0.94))), 0.0), 18.0);
  float hairline = exp(-pow((dCss + 0.55) / 0.9, 2.0)) * alpha;

  vec2 q = p - uCenter;
  float ang = atan(q.y, q.x) / 6.28318530718 + 0.5;
  float arc = abs(fract(ang - uSweep + 0.5) - 0.5);
  float sweep = exp(-pow(arc * 7.0, 2.0)) * uEnergy;

  /* The exterior shell is the exact theme background, so wrapper canvases
     disappear into the page instead of exposing tinted square corners. Only a
     narrow band at the liquid edge receives the SULA glass material. */
  float glassMask = smoothstep(-7.0, -0.15, dCss) * alpha * 0.82;
  vec3 edgeGlass = mix(uTint, uAccent, 0.12);
  vec3 glass = uBackdrop;
  glass = mix(glass, edgeGlass, glassMask);
  glass += uAccent * (fres * 0.22 + spec * 0.5) * (1.0 + curv * 0.8)
             * rim * uShine * (1.0 + uEnergy * 0.9);
  glass += uAccent * (0.16 + curv * 1.0) * hairline * uShine;
  glass += uAccent * sweep * glassMask * 0.6 * uShine;
  glass += vec3(0.05) * mix(0.3, 1.0, uShine) * hairline;

  outColor = vec4(glass, alpha);
}
`;

import { Mesh, Program, Renderer, Triangle } from "ogl";
import {
  borderFragmentShader,
  borderVertexShader,
  MAX_FRAME_BLOBS,
} from "./border-shader";
import type { FieldColors } from "./field";

/** One animation frame of the liquid ring, already flattened to device pixels
 * with Y flipped, since `gl_FragCoord` counts up from the bottom. */
export interface BorderFrame {
  /** Ring centre in device px, Y-flipped. */
  center: [number, number];
  /** Ring half-extents in device px. */
  half: [number, number];
  /** Corner radius in device px. */
  radius: number;
  /** Half the band width in device px. */
  thickness: number;
  /** Peak edge displacement in device px, already scaled by energy. */
  wobble: number;
  /** Focus energy 0..1: lifts the rim and drives the perimeter sweep. */
  energy: number;
  /** Perimeter highlight position, 0..1 around the ring. */
  sweep: number;
  /** Seconds since start. */
  time: number;
  /** Up to MAX_FRAME_BLOBS pointer discs as flat vec4s (x, y, radius, strength). */
  blobs: number[];
  blobCount: number;
  /** Smooth-min radius for the pointer merge, in device px. */
  blobK: number;
  /** Edge-to-frame geometry reveal, 0..1. */
  intro: number;
}

export interface BorderField {
  resize(width: number, height: number, dpr: number): void;
  setColors(colors: FieldColors): void;
  draw(frame: BorderFrame): void;
  dispose(): void;
}

export interface CreateBorderFieldOptions {
  canvas: HTMLCanvasElement;
  colors: FieldColors;
  onContextLost?: () => void;
}

/**
 * A second small program in sula-core, parallel to `createField`. It shares the
 * colour and lighting helpers (`FieldColors`, the accent rim vocabulary) so the
 * fill and the frame can never drift in look, but renders a rounded-box ring
 * rather than a filled field.
 */
export function createBorderField(
  options: CreateBorderFieldOptions,
): BorderField | null {
  const { canvas, colors, onContextLost } = options;

  let renderer: Renderer;
  try {
    renderer = new Renderer({
      canvas,
      webgl: 2,
      dpr: 1,
      alpha: true,
      premultipliedAlpha: false,
      antialias: false,
    });
  } catch {
    return null;
  }

  const gl = renderer.gl;
  if (!("drawBuffers" in gl)) return null;
  gl.clearColor(0, 0, 0, 0);

  const program = new Program(gl, {
    vertex: borderVertexShader,
    fragment: borderFragmentShader,
    transparent: true,
    depthTest: false,
    uniforms: {
      uTime: { value: 0 },
      uCenter: { value: [0, 0] },
      uHalf: { value: [0, 0] },
      uRadius: { value: 0 },
      uThickness: { value: 1 },
      uWobble: { value: 0 },
      uEnergy: { value: 0 },
      uSweep: { value: 0 },
      uDpr: { value: 1 },
      uBlobCount: { value: 0 },
      uBlobs: { value: new Array<number>(MAX_FRAME_BLOBS * 4).fill(0) },
      uBlobK: { value: 14 },
      uTint: { value: colors.tint },
      uBackdrop: { value: colors.backdrop },
      uAccent: { value: colors.accent },
      uShine: { value: colors.shine },
      uIntro: { value: 1 },
    },
  });
  const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
  const u = program.uniforms;

  const handleLost = (event: Event) => {
    event.preventDefault();
    onContextLost?.();
  };
  canvas.addEventListener("webglcontextlost", handleLost);

  return {
    resize(width, height, dpr) {
      u.uDpr.value = dpr;
      renderer.dpr = dpr;
      renderer.setSize(width, height);
    },
    setColors(next) {
      u.uTint.value = next.tint;
      u.uBackdrop.value = next.backdrop;
      u.uAccent.value = next.accent;
      u.uShine.value = next.shine;
    },
    draw(frame) {
      u.uTime.value = frame.time;
      u.uCenter.value = frame.center;
      u.uHalf.value = frame.half;
      u.uRadius.value = frame.radius;
      u.uThickness.value = frame.thickness;
      u.uWobble.value = frame.wobble;
      u.uEnergy.value = frame.energy;
      u.uSweep.value = frame.sweep;
      u.uBlobCount.value = frame.blobCount;
      u.uBlobs.value = frame.blobs;
      u.uBlobK.value = frame.blobK;
      u.uIntro.value = frame.intro;
      renderer.render({ scene: mesh });
    },
    dispose() {
      canvas.removeEventListener("webglcontextlost", handleLost);
      const lose = gl.getExtension("WEBGL_lose_context");
      lose?.loseContext();
    },
  };
}

"use client";
import * as React from "react";

/** Backoff between retries, in ms. The last value repeats until attempts run out. */
const BACKOFF = [400, 900, 2000, 4000];
const MAX_ATTEMPTS = 6;

/**
 * Failure state for a field, and the way back out of it.
 *
 * A lost context is not permanent: the browser takes one to satisfy a new
 * request elsewhere on the page and hands it back once the pressure drops. It
 * only makes that offer to a canvas still in the document, so a component that
 * unmounts its canvas on failure is the reason a static fallback lasts until a
 * reload. Keep the canvas mounted, hide it, and rebuild on `generation`.
 */
export function useContextRecovery(
  canvasRef: React.RefObject<HTMLCanvasElement | null>,
) {
  const [failed, setFailed] = React.useState(false);
  const [generation, setGeneration] = React.useState(0);
  const attempts = React.useRef(0);

  const retry = React.useCallback(() => {
    setFailed(false);
    setGeneration((n) => n + 1);
  }, []);

  React.useEffect(() => {
    if (!failed) return;

    const canvas = canvasRef.current;
    const onRestored = () => {
      attempts.current = 0;
      retry();
    };
    canvas?.addEventListener("webglcontextrestored", onRestored);

    let timer = 0;
    if (attempts.current < MAX_ATTEMPTS) {
      const wait = BACKOFF[Math.min(attempts.current, BACKOFF.length - 1)];
      attempts.current += 1;
      timer = window.setTimeout(retry, wait);
    }

    return () => {
      window.clearTimeout(timer);
      canvas?.removeEventListener("webglcontextrestored", onRestored);
    };
  }, [failed, canvasRef, retry]);

  const onContextLost = React.useCallback(() => setFailed(true), []);

  const onContextReady = React.useCallback(() => {
    attempts.current = 0;
  }, []);

  return { failed, generation, onContextLost, onContextReady };
}

"use client";
import * as React from "react";
import type { FieldColors } from "./field";

export function useFieldRetune(
  fieldRef: React.RefObject<{ setColors(colors: FieldColors): void } | null>,
  read: () => FieldColors | null,
  token: unknown,
  wakeRef?: React.RefObject<(() => void) | null>,
) {
  const readRef = React.useRef(read);
  readRef.current = read;

  // biome-ignore lint/correctness/useExhaustiveDependencies: `token` is not read here, it is what decides when a retune runs
  React.useEffect(() => {
    const next = readRef.current();
    if (!next) return;
    fieldRef.current?.setColors(next);
    wakeRef?.current?.();
  }, [token, fieldRef, wakeRef]);
}