@signal9/era-ui 3.6.0 → 3.7.0

package/dist/ui/logo/logo.svelte

@@ -0,0 +1,744 @@
+<script module lang="ts">
+	/**
+	 * SIGNALNINE dish — the logo, in one self-contained file.
+	 *
+	 * Zero imports and zero dependencies, deliberately: this file is the mark's
+	 * portable master copy, so it stays droppable into any Svelte 5 project
+	 * unchanged. It is the one component in the library that does NOT consume
+	 * --era-* tokens — a logo has fixed brand geometry and colour, and must
+	 * render identically whatever density, surface, or theme surrounds it.
+	 * Do not "fix" that by tokenising it.
+	 *
+	 * A nonagon satellite dish modeled as a true closed shell (inner bowl, outer
+	 * underside cone, rim wall), orthographically projected to plain SVG polygons
+	 * with painter depth-sorting, backface culling, and Lambert shading in oklch.
+	 * No rendering library — the math below is the product.
+	 *
+	 * The render math and physics tables are exported from this module block, so
+	 * tooling (labs, exporters, tests) can reuse them without duplicating
+	 * geometry:
+	 *   import { Logo, renderLogoMarkup, PAL } from './index.js';
+	 *
+	 * Colors, geometry constants, and defaults are final brand decisions.
+	 *
+	 * Ported from blog.signalnine.dev (src/lib/SignalnineDish.svelte); era-ui is
+	 * now the canonical home. Public types/functions were renamed Dish* -> Logo*;
+	 * the geometry and physics are untouched.
+	 */
+
+	export type LogoPalette = 'amber' | 'chrome' | 'steel';
+	export type LogoState =
+		'manual' | 'idle' | 'loading' | 'search' | 'transmit' | 'success' | 'error' | 'sleep';
+	export type HueOverride = { hD: number; hL: number; C: number };
+	export type Ring = { r: number; rise: number; a: number; w: number };
+
+	export interface LogoParams {
+		/** 0 flat plate → 100 deepest dish (mouth always full width). */
+		depth?: number;
+		/** Core-inlay dilate, 40–240 (%). */
+		inset?: number;
+		/** View elevation, 0 flat 2D face-on → 100 edge-on/underside. */
+		tilt?: number;
+		/** Screen-plane rotation, degrees. */
+		aim?: number;
+		/** Key-light orbit around the dish axis, degrees. */
+		light?: number;
+		palette?: LogoPalette;
+		/** Global luminance multiplier (sleep dims to 0.5). */
+		dim?: number;
+		/** Rotor spin, degrees (loading preset). */
+		spin?: number;
+		/** Core opacity multiplier (error blink). */
+		feedBlink?: number;
+		/** Core radius multiplier (transmit pulse). */
+		feedPulse?: number;
+		/** Rising transmit/success rings. */
+		rings?: Ring[] | null;
+		/** State recolor (error red, success green). */
+		hueOv?: HueOverride | null;
+	}
+
+	export const LOGO_STATES: LogoState[] = [
+		'manual',
+		'idle',
+		'loading',
+		'search',
+		'transmit',
+		'success',
+		'error',
+		'sleep'
+	];
+
+	const D2R = Math.PI / 180;
+	const R = 80;
+
+	export const wrap = (d: number) => ((((d + 180) % 360) + 360) % 360) - 180;
+	export const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));
+	export const norm360 = (v: number) => ((v % 360) + 360) % 360;
+
+	// extreme dynamic range: L spans deep shadow → near-white; hue warms in shadow
+	// and pales toward the highlight; chroma peaks in the midtones (bell), like
+	// real metal.
+	export const PAL: Record<
+		LogoPalette,
+		{
+			Cm: number;
+			hD: number;
+			hL: number;
+			loI: number;
+			hiI: number;
+			loO: number;
+			hiO: number;
+			dot: string;
+			tile: string;
+		}
+	> = {
+		amber: {
+			Cm: 0.15,
+			// Burned amber. The shadow end sits at scorched orange-red (38°) and the
+			// HIGHLIGHT deliberately stops at 70° / L 0.86 — pushing it to white or
+			// past 80° is what made the mark read as pale yellow instead of hot
+			// metal. Verified in-gamut across the whole ramp, so nothing posterizes
+			// on the way to the highlight.
+			hD: 38,
+			hL: 70,
+			loI: 0.24,
+			hiI: 0.86,
+			loO: 0.18,
+			hiO: 0.36,
+			dot: 'oklch(0.93 0.08 72)',
+			tile: '#1c1206'
+		},
+		chrome: {
+			Cm: 0.09,
+			hD: 258,
+			hL: 208,
+			loI: 0.25,
+			hiI: 0.975,
+			loO: 0.22,
+			hiO: 0.4,
+			dot: 'oklch(0.985 0.008 215)',
+			tile: '#0c141b'
+		},
+		steel: {
+			Cm: 0.035,
+			hD: 252,
+			hL: 240,
+			loI: 0.27,
+			hiI: 0.94,
+			loO: 0.24,
+			hiO: 0.38,
+			dot: 'oklch(0.98 0.006 245)',
+			tile: '#101418'
+		}
+	};
+	export const PALETTES = Object.keys(PAL) as LogoPalette[];
+
+	function faceColor(
+		t: number,
+		P: (typeof PAL)[LogoPalette],
+		dim: number,
+		hueOv: HueOverride | null,
+		back: boolean
+	) {
+		const x = Math.max(0, Math.min(1, t));
+		const smooth = x * x * (3 - 2 * x);
+		// Two curves on purpose. LUMINANCE blends smoothstep toward linear, which
+		// spaces the facets evenly instead of crushing the shadow end. HUE and
+		// CHROMA stay on the original smoothstep: they decide how amber the metal
+		// reads, and running them off the lifted curve drags every facet toward the
+		// pale end of the ramp — the mark goes yellow instead of amber.
+		const sL = 0.45 * smooth + 0.55 * x;
+		const lo = back ? P.loO : P.loI;
+		const hi = back ? P.hiO : P.hiI;
+		const L = (lo + (hi - lo) * sL) * dim;
+		const hD = hueOv ? hueOv.hD : P.hD;
+		const hL = hueOv ? hueOv.hL : P.hL;
+		const C = (hueOv ? hueOv.C : P.Cm) * (0.72 + 1.12 * smooth * (1 - smooth)); // chroma bell
+		return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${(hD + (hL - hD) * smooth).toFixed(1)})`;
+	}
+
+	// ---------- vec helpers ----------
+	type V3 = [number, number, number];
+	const sub = (a: V3, b: V3): V3 => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+	const cross = (a: V3, b: V3): V3 => [
+		a[1] * b[2] - a[2] * b[1],
+		a[2] * b[0] - a[0] * b[2],
+		a[0] * b[1] - a[1] * b[0]
+	];
+	const dot = (a: V3, b: V3) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+	const norm = (a: V3): V3 => {
+		const l = Math.hypot(a[0], a[1], a[2]) || 1;
+		return [a[0] / l, a[1] / l, a[2] / l];
+	};
+	const ptsAttr = (pts: V3[]) => pts.map((p) => p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' ');
+
+	// ---------- model: dish shell in model space (axis = +Y up, apex at origin) ----------
+	// Single-phase DEPTH: the mouth stays full width while the bowl deepens.
+	// 0% = flat plate, 100% = deepest dish. (No closed-bud regime — the core
+	// inlay can never be swallowed by the fold.)
+	const A_DISH = Math.atan2(55, R); // ~34.5°: deepest dish wall angle
+
+	// True closed shell: inner bowl + real underside cone + rim band. No
+	// screen-space tricks — every viewing angle renders the actual solid, so it
+	// sits on any background.
+	function buildModel(depthT: number, spinDeg: number) {
+		const h = R * Math.tan(depthT * A_DISH);
+		const t = 4.5 + 5 * depthT; // wall thickness
+		const verts: V3[] = [[0, 0, 0]]; // 0 = inner apex; 1..9 inner rim
+		for (let k = 0; k < 9; k++) {
+			const th = (-90 + k * 40 + spinDeg) * D2R;
+			verts.push([R * Math.cos(th), h, R * Math.sin(th)]);
+		}
+		verts.push([0, -t, 0]); // 10 = outer apex; 11..19 outer rim
+		for (let k = 0; k < 9; k++) {
+			const v = verts[1 + k];
+			verts.push([v[0], v[1] - t, v[2]]);
+		}
+		const faces: { ix: number[]; kind: 'in' | 'out' | 'band' }[] = [];
+		for (let k = 0; k < 9; k++) {
+			const j = (k + 1) % 9;
+			faces.push({ ix: [0, 1 + k, 1 + j], kind: 'in' }); // bowl gore
+			faces.push({ ix: [10, 11 + j, 11 + k], kind: 'out' }); // underside gore
+			faces.push({ ix: [1 + k, 1 + j, 11 + j, 11 + k], kind: 'band' }); // rim edge wall
+		}
+		return { verts, faces, h };
+	}
+
+	// ---------- projection ----------
+	// rho=90°: axis at viewer (flat 2D nonagon). 0°: edge-on. <0: underside shows.
+	function makeProjector(rho: number) {
+		const c = Math.cos(rho),
+			s = Math.sin(rho);
+		return (p: V3): V3 => [p[0], -(p[1] * c - p[2] * s), p[1] * s + p[2] * c];
+	}
+	const FILL = 0.1; // head-on sheen weight
+	const AMBIENT = 0.13; // bounce fill: keeps the away-facing facets readable
+	const TILT_SPAN = 106; // deg swept from flat (90°) to underside (-16°)
+
+	/** oklch → sRGB hex, for portable export. */
+	export function oklchToHex(Lc: number, C: number, H: number) {
+		const hr = (H * Math.PI) / 180,
+			a = C * Math.cos(hr),
+			b = C * Math.sin(hr);
+		const l_ = Lc + 0.3963377774 * a + 0.2158037573 * b;
+		const m_ = Lc - 0.1055613458 * a - 0.0638541728 * b;
+		const s_ = Lc - 0.0894841775 * a - 1.291485548 * b;
+		const l = l_ ** 3,
+			m = m_ ** 3,
+			s = s_ ** 3;
+		const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+		const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+		const bl = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+		const gam = (c: number) => {
+			c = Math.max(0, Math.min(1, c));
+			return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+		};
+		const to = (v: number) =>
+			Math.round(gam(v) * 255)
+				.toString(16)
+				.padStart(2, '0');
+		return '#' + to(r) + to(g) + to(bl);
+	}
+
+	/** One frame of the dish, as inner SVG markup for a -100 -100 200 200 canvas. */
+	export function renderLogoMarkup(params: LogoParams = {}): string {
+		const {
+			depth = 52,
+			inset = 100,
+			tilt = 55,
+			aim = 0,
+			light = REST_LIGHT,
+			palette = 'amber',
+			dim = 1,
+			spin = 0,
+			feedBlink = 1,
+			feedPulse = 1,
+			rings = null,
+			hueOv = null
+		} = params;
+		const P = PAL[palette] ?? PAL.amber;
+
+		const rr = (90 - (tilt / 100) * TILT_SPAN) * D2R;
+		const M = buildModel(depth / 100, spin);
+		const pr = makeProjector(rr);
+		const PV = M.verts.map(pr); // project every vertex ONCE
+		// key light ORBITS the dish axis (model space) so sliding it rotates the
+		// bright petal evenly around the ring, independent of the view tilt.
+		const phi = light * D2R;
+		const Lkey = norm([Math.cos(phi), 0.55, Math.sin(phi)]);
+
+		// shade + cull + depth-sort the shell (painter). Inner bowl gets full
+		// Lambert; underside and rim band stay flat dark tones.
+		const underFill = faceColor(0.16, P, dim, hueOv, true);
+		const bandFill = faceColor(0.3, P, dim, hueOv, true);
+		const polys: { z: number; d: string; fill: string }[] = [];
+		for (const f of M.faces) {
+			const pts = f.ix.map((i) => M.verts[i]);
+			let n = norm(cross(sub(pts[1], pts[0]), sub(pts[2], pts[0])));
+			const orient: V3 =
+				f.kind === 'in'
+					? [0, 1, 0]
+					: f.kind === 'out'
+						? [0, -1, 0]
+						: [(pts[0][0] + pts[1][0]) / 2, 0, (pts[0][2] + pts[1][2]) / 2];
+			if (dot(n, orient) < 0) n = n.map((v) => -v) as V3; // explicit outward orientation
+			const ns = pr(n);
+			if (ns[2] <= 0.015) continue; // backface cull — the shell is closed
+			const sp = f.ix.map((i) => PV[i]);
+			let fill;
+			if (f.kind === 'in') {
+				const lit = Math.max(0, dot(n, Lkey)) + Math.max(0, ns[2]) * FILL;
+				fill = faceColor(Math.min(1, AMBIENT + (1 - AMBIENT) * lit), P, dim, hueOv, false);
+			} else fill = f.kind === 'out' ? underFill : bandFill;
+			polys.push({ z: sp.reduce((a, p) => a + p[2], 0) / sp.length, d: ptsAttr(sp), fill });
+		}
+		polys.sort((p, q) => p.z - q.z);
+
+		// vertical recenter over the whole projected solid
+		let miny = 1e9,
+			maxy = -1e9;
+		for (const p of PV) {
+			if (p[1] < miny) miny = p[1];
+			if (p[1] > maxy) maxy = p[1];
+		}
+		const dy = -(miny + maxy) / 2;
+
+		// aim: rotate in the screen plane — exact for a 9-fold-symmetric solid
+		let s = `<g><g transform="rotate(${aim.toFixed(1)}) translate(0,${dy.toFixed(2)})">`;
+		// stroke = own fill at hairline width: kills antialiasing seams without
+		// visible separators between facets
+		for (const p of polys)
+			s += `<polygon points="${p.d}" fill="${p.fill}" stroke="${p.fill}" stroke-width="0.5" stroke-linejoin="miter"/>`;
+
+		// CORE INLAY: dark nonagon socket + bright nonagon core on the bowl
+		// surface. Visible exactly when the sightline over the near rim reaches
+		// the apex (true geometry, not a hack): tan(view elevation) must exceed
+		// the wall slope h/R.
+		const axisZ = pr([0, 1, 0])[2];
+		const vis = M.h < 0.01 ? 1 : Math.max(0, Math.min(1, ((Math.tan(rr) * R) / M.h - 1) * 2.5));
+		const K = axisZ > 0 ? Math.min(1, axisZ * 1.6) * vis : 0;
+		if (K > 0.02) {
+			const ring = (t: number) =>
+				M.verts
+					.slice(1, 10)
+					.map((v) => pr([v[0] * t, v[1] * t, v[2] * t]))
+					.map((p) => p[0].toFixed(2) + ',' + p[1].toFixed(2))
+					.join(' ');
+			const hD = hueOv ? hueOv.hD : P.hD,
+				Cm = hueOv ? hueOv.C : P.Cm;
+			const dil = inset / 100;
+			const tS = Math.min(0.88, 0.21 * dil),
+				tC = Math.min(0.7, 0.115 * dil);
+			s +=
+				`<polygon points="${ring(tS)}" fill="oklch(${(0.14 * dim).toFixed(3)} ${(Cm * 0.45).toFixed(3)} ${hD})" opacity="${K.toFixed(2)}"/>` +
+				`<polygon points="${ring(tC * feedPulse)}" fill="${P.dot}" opacity="${(K * feedBlink).toFixed(2)}"/>`;
+		}
+		if (rings)
+			for (const ring of rings) {
+				let pts = '';
+				for (let i = 0; i <= 36; i++) {
+					const th = (i / 36) * 2 * Math.PI;
+					const p = pr([ring.r * Math.cos(th), M.h + ring.rise, ring.r * Math.sin(th)]);
+					pts += p[0].toFixed(1) + ',' + p[1].toFixed(1) + ' ';
+				}
+				s += `<polyline points="${pts.trim()}" fill="none" stroke="${P.dot}" stroke-width="${ring.w.toFixed(2)}" opacity="${ring.a.toFixed(2)}" stroke-linejoin="round"/>`;
+			}
+		return s + '</g></g>';
+	}
+
+	/** Standalone portable SVG of a pose — oklch converted to sRGB hex. */
+	export function logoSvgDocument(params: LogoParams = {}, size = 400): string {
+		const inner = renderLogoMarkup(params).replace(
+			/oklch\(\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s*\)/g,
+			(_m, l, c, h) => oklchToHex(+l, +c, +h)
+		);
+		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200" width="${size}" height="${size}">${inner}</svg>`;
+	}
+
+	// ---------- pedestal physics ----------
+	// Every degree of freedom is a damped torsion spring, as if the dish were a
+	// mass on a real gimbal mount. Presets set TARGETS (and fire impulses); the
+	// springs do the moving. Direct input bypasses them entirely.
+	export const SPR = {
+		depth: { k: 70, c: 12 },
+		inset: { k: 80, c: 13 },
+		tilt: { k: 34, c: 7 },
+		aim: { k: 26, c: 5.2 },
+		light: { k: 90, c: 17 }
+	} as const;
+	export type Dof = keyof typeof SPR;
+	export type LogoSim = Record<Dof, { v: number; vel: number }> & {
+		/** Where a spinning light has committed to stop. Always AHEAD of the
+		 *  current angle, so the sweep never reverses to get home. */
+		light: { v: number; vel: number; park?: number | null };
+	};
+	export type Fx = {
+		spinV: number;
+		dim: number;
+		feedBlink: number;
+		feedPulse: number;
+		rings: Ring[] | null;
+		hueOv: HueOverride | null;
+	};
+
+	export function createSim(p: Required<Pick<LogoParams, Dof>>): LogoSim {
+		return {
+			depth: { v: p.depth, vel: 0 },
+			inset: { v: p.inset, vel: 0 },
+			tilt: { v: p.tilt, vel: 0 },
+			aim: { v: p.aim, vel: 0 },
+			light: { v: p.light, vel: 0 }
+		};
+	}
+
+	/** Orbit speed above which the light is treated as spinning and must finish
+	 *  its rotation rather than be sprung to the nearest angle. */
+	const SPIN_CARRY = 60; // deg/s
+	/** How fast the key light sweeps while loading — about 1.2 turns/sec. */
+	const SWEEP_RATE = 440; // deg/s
+	/** Where the key light parks at rest. Every preset targets this (or an offset
+	 *  from it), so moving it re-lights the mark everywhere at once. */
+	export const REST_LIGHT = 250; // deg
+
+	/** Fixed physics step. Long frames are sub-stepped rather than integrated in
+	 *  one huge leap — a stalled frame (e.g. the main thread finishing a
+	 *  navigation) would otherwise blow the spring up and snap the pose. */
+	export const FIXED_STEP = 1 / 120;
+
+	/**
+	 * Advance every spring one step toward its target.
+	 *
+	 * `coastLight` cuts the light's spring drive while it is still orbiting fast,
+	 * leaving only drag — the sweep spins down like a motor losing power instead
+	 * of being yanked to the nearest rest angle (which reverses it) or whipped to
+	 * one a full turn ahead (which speeds it up). Once it drops below SPIN_CARRY
+	 * the spring takes over and parks it.
+	 */
+	export function integrate(
+		sim: LogoSim,
+		tgt: Record<Dof, number>,
+		dt: number,
+		coastLight = false
+	) {
+		if (!coastLight) sim.light.park = null; // drive restored — abandon any parking plan
+		for (const key of Object.keys(SPR) as Dof[]) {
+			const s = sim[key];
+			const p = SPR[key];
+			// A spinning light always FINISHES ITS ROTATION: it commits to the next
+			// arrival of the rest angle that lies ahead, then decelerates to land on
+			// it with ~zero speed. Never reverses, never speeds up. If that arrival
+			// is too close to stop gracefully, it goes around once more.
+			// A spinning light FINISHES ITS ROTATION at full speed: on losing drive it
+			// commits to the next pass of the rest angle ahead of it and holds the
+			// sweep rate the whole way — no easing, no reversal — then stops dead on
+			// its mark. Landing exactly on home means the halt shows as motion
+			// ending, not as the mark jumping.
+			if (key === 'light' && coastLight) {
+				const L = sim.light;
+				if (L.park != null || L.vel > SPIN_CARRY) {
+					if (L.park == null) L.park = L.v + norm360(tgt.light - L.v); // next pass of home
+					const step = L.vel * dt; // velocity untouched: constant cruise
+					if (L.park - L.v > step) {
+						L.v += step;
+						continue;
+					}
+					L.v = L.park; // arrived
+					L.vel = 0;
+					L.park = null;
+				}
+			}
+			let d = tgt[key] - s.v;
+			if (key === 'aim' || key === 'light') d = wrap(d);
+			s.vel += (p.k * d - p.c * s.vel) * dt;
+			s.v += s.vel * dt;
+		}
+		sim.depth.v = clamp(sim.depth.v, 0, 100);
+		sim.tilt.v = clamp(sim.tilt.v, 0, 100);
+		sim.inset.v = clamp(sim.inset.v, 40, 240);
+	}
+
+	/**
+	 * Per-state spring targets and visual effects. Mutates `sim` for impulses.
+	 *
+	 * Tilt targets are expressed RELATIVE to `baseTilt` (the mark's resting
+	 * elevation), so a mark parked at a different tilt keeps its silhouette
+	 * through every preset instead of springing back to the stock 55. At the
+	 * default 55 the numbers are identical to the original absolute table.
+	 */
+	export function stateFrame(
+		st: LogoState,
+		t: number,
+		scl: number,
+		sim: LogoSim,
+		jolt: { last: number; sign: number },
+		baseTilt = 55
+	): { tgt: Record<Dof, number>; fx: Fx } {
+		const fx: Fx = { spinV: 0, dim: 1, feedBlink: 1, feedPulse: 1, rings: null, hueOv: null };
+		let tgt: Record<Dof, number> = {
+			depth: 52,
+			tilt: baseTilt,
+			aim: 0,
+			light: REST_LIGHT,
+			inset: scl
+		};
+		switch (st) {
+			case 'idle':
+				tgt = {
+					depth: 52 + 4 * Math.sin(t * 0.9),
+					tilt: baseTilt,
+					aim: 6 * Math.sin(t * 0.45),
+					light: REST_LIGHT + 15 * Math.sin(t * 0.3),
+					inset: scl
+				};
+				break;
+			case 'loading':
+				// Pure light orbit: the solid holds its resting pose and only the key
+				// light sweeps around the axis, so the mark reads as a spinner without
+				// the shape itself thrashing. No depth bob, no rotor spin.
+				tgt = { depth: 52, tilt: baseTilt, aim: 0, light: REST_LIGHT + t * SWEEP_RATE, inset: scl };
+				break;
+			case 'search':
+				// slew between hard targets — the spring gives momentum + overshoot
+				tgt = {
+					depth: 57,
+					tilt: baseTilt + 6 * Math.sin(t * 0.8),
+					aim: Math.floor(t / 2.4) % 2 ? 55 : -55,
+					light: REST_LIGHT,
+					inset: scl
+				};
+				break;
+			case 'transmit': {
+				tgt = { depth: 98, tilt: baseTilt + 19, aim: 0, light: REST_LIGHT, inset: scl }; // deepest collector
+				fx.rings = [0, 1, 2].map((i) => {
+					const ph = (t * 0.9 + i / 3) % 1;
+					return { r: 14 + ph * 95, rise: ph * 26, a: (1 - ph) * 0.85, w: 2.6 - 1.8 * ph };
+				});
+				fx.feedPulse = 1 + 0.5 * Math.sin(t * 6);
+				break;
+			}
+			case 'success': {
+				tgt = { depth: 52, tilt: baseTilt + 5, aim: 0, light: REST_LIGHT, inset: scl };
+				const ph = (t * 0.4) % 1;
+				fx.hueOv = { hD: 138, hL: 165, C: 0.12 };
+				fx.feedPulse = 1.15 + 0.15 * Math.sin(t * 3);
+				fx.rings = [{ r: 14 + ph * 100, rise: ph * 18, a: (1 - ph) * 0.5, w: 2 - 1.2 * ph }];
+				break;
+			}
+			case 'error':
+				tgt = { depth: 100, tilt: baseTilt, aim: 0, light: REST_LIGHT, inset: scl }; // slams to full depth
+				fx.hueOv = { hD: 16, hL: 34, C: 0.18 };
+				fx.feedBlink = Math.sin(t * 10) > 0 ? 1 : 0.15;
+				if (t - jolt.last > 2.0) {
+					// physical jolt: velocity impulse
+					jolt.last = t;
+					jolt.sign = -jolt.sign;
+					sim.aim.vel += jolt.sign * 150;
+					sim.tilt.vel += 35;
+				}
+				break;
+			case 'sleep':
+				tgt = {
+					depth: 71 + 4 * Math.sin(t * 0.5),
+					tilt: baseTilt - 5,
+					aim: 150,
+					light: REST_LIGHT - 10,
+					inset: scl
+				}; // droops on its mount
+				fx.dim = 0.5;
+				fx.feedBlink = 0.25 + 0.1 * Math.sin(t * 0.7);
+				break;
+		}
+		return { tgt, fx };
+	}
+</script>
+
+<script lang="ts">
+	let {
+		depth = 52,
+		tilt = 55,
+		aim = 0,
+		light = REST_LIGHT,
+		inset = 100,
+		palette = 'amber',
+		state: stateProp = 'manual',
+		size = 272,
+		pressable = false,
+		class: className
+	}: {
+		depth?: number;
+		tilt?: number;
+		aim?: number;
+		light?: number;
+		inset?: number;
+		palette?: LogoPalette;
+		/** 'manual' renders a static pose; any other state animates its preset. */
+		state?: LogoState;
+		size?: number;
+		/** Deepen the bowl while held, then spring back on release. */
+		pressable?: boolean;
+		class?: string;
+	} = $props();
+
+	let reduced = $state(false);
+	// Reduced motion forces the static mark.
+	$effect(() => {
+		const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+		reduced = mq.matches;
+		const on = (e: MediaQueryListEvent) => (reduced = e.matches);
+		mq.addEventListener('change', on);
+		return () => mq.removeEventListener('change', on);
+	});
+	const eff: LogoState = $derived(reduced ? 'manual' : stateProp);
+
+	// ---------- press spring ----------
+	// Hold and the bowl deepens; release and it springs back with a little
+	// overshoot. Its own short-lived rAF, because a `manual` mark has no loop.
+	const PRESS_SPR = { k: 600, c: 30 }; // stiffer => quicker press, same feel
+	const PRESS_DEPTH = 70; // extra depth (0–100 scale) at full press
+	let pressV = $state(0);
+	let pressVel = 0;
+	let pressing = false;
+	let pressRaf = 0;
+
+	function pressLoop() {
+		if (pressRaf) return; // already settling
+		let last = performance.now();
+		const step = (now: number) => {
+			const dt = Math.min(0.05, (now - last) / 1000) || 0.016;
+			last = now;
+			const target = pressing ? 1 : 0;
+			pressVel += (PRESS_SPR.k * (target - pressV) - PRESS_SPR.c * pressVel) * dt;
+			pressV += pressVel * dt;
+			// snap to exact rest once the residual is imperceptible
+			if (!pressing && Math.abs(pressV) < 0.004 && Math.abs(pressVel) < 0.06) {
+				pressV = 0;
+				pressVel = 0;
+				pressRaf = 0;
+				return;
+			}
+			pressRaf = requestAnimationFrame(step);
+		};
+		pressRaf = requestAnimationFrame(step);
+	}
+
+	/** Pointer handling attached imperatively, so this decorative SVG doesn't
+	 *  need an interactive ARIA role — whatever link or button wraps the mark
+	 *  stays the real affordance. */
+	function press(node: Element) {
+		if (!pressable) return;
+		const down = () => {
+			pressing = true;
+			pressLoop();
+		};
+		const up = () => {
+			if (!pressing) return;
+			pressing = false;
+			pressLoop();
+		};
+		node.addEventListener('pointerdown', down);
+		node.addEventListener('pointercancel', up);
+		window.addEventListener('pointerup', up); // release anywhere
+		return {
+			destroy() {
+				node.removeEventListener('pointerdown', down);
+				node.removeEventListener('pointercancel', up);
+				window.removeEventListener('pointerup', up);
+				cancelAnimationFrame(pressRaf);
+				pressRaf = 0;
+			}
+		};
+	}
+
+	// Static pose — a pure derived, so manual renders cost zero rAF.
+	const staticMarkup = $derived(
+		renderLogoMarkup({
+			depth: clamp(depth + pressV * PRESS_DEPTH, 0, 100),
+			inset,
+			tilt,
+			aim,
+			light,
+			palette
+		})
+	);
+	// Preset frames land here; seeded with a static frame so SSR paints a real
+	// mark before hydration.
+	// svelte-ignore state_referenced_locally
+	let animMarkup = $state(renderLogoMarkup({ depth, inset, tilt, aim, light, palette }));
+	const markup = $derived(eff === 'manual' ? staticMarkup : animMarkup);
+
+	// ---------- preset loop ----------
+	// The simulation lives at component scope, NOT inside the loop effect, so a
+	// state change only swaps the spring TARGETS — position and velocity carry
+	// over. Re-seeding per state would throw both away and snap the pose (a
+	// retargeted spring must preserve position and velocity to stay continuous).
+	// svelte-ignore state_referenced_locally
+	const sim = createSim({ depth, inset, tilt, aim, light });
+	const jolt = { last: -9, sign: 1 };
+	let spinVel = 0;
+	let spinA = 0;
+
+	// Runs ONLY for preset states; a static mark costs zero CPU. Client-only
+	// ($effect never runs during SSR).
+	$effect(() => {
+		const st = eff;
+		if (st === 'manual') return;
+		let raf = 0;
+		const t0 = performance.now();
+		let lastNow = t0;
+		let acc = 0;
+		let frameLast = t0;
+		const loop = (now: number) => {
+			// Cap the catch-up window, then burn it down in FIXED_STEP slices: a
+			// stalled frame advances the springs by many small steps instead of one
+			// explosive one, so the pose stays continuous across a jank spike.
+			acc += Math.min(0.25, (now - lastNow) / 1000) || FIXED_STEP;
+			lastNow = now;
+			const t = (now - t0) / 1000;
+			const { tgt, fx } = stateFrame(st, t, sim.inset.v, sim, jolt, tilt);
+			for (let i = 0; acc >= FIXED_STEP && i < 30; i++) {
+				integrate(sim, tgt, FIXED_STEP, st !== 'loading');
+				acc -= FIXED_STEP;
+			}
+			const frameDt = Math.min(0.05, (now - frameLast) / 1000) || FIXED_STEP;
+			frameLast = now;
+			spinVel += (fx.spinV - spinVel) * Math.min(1, frameDt * 2.5); // rotor inertia
+			spinA = (spinA + spinVel * frameDt) % 360;
+			animMarkup = renderLogoMarkup({
+				depth: clamp(sim.depth.v + pressV * PRESS_DEPTH, 0, 100),
+				inset: sim.inset.v,
+				tilt: sim.tilt.v,
+				aim: wrap(sim.aim.v),
+				light: norm360(sim.light.v),
+				palette,
+				spin: spinA,
+				dim: fx.dim,
+				feedBlink: fx.feedBlink,
+				feedPulse: fx.feedPulse,
+				rings: fx.rings,
+				hueOv: fx.hueOv
+			});
+			raf = requestAnimationFrame(loop);
+		};
+		raf = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(raf);
+	});
+
+	/** Standalone SVG of the pose as currently rendered. */
+	export function exportSVG(): string {
+		return logoSvgDocument({ depth, inset, tilt, aim, light, palette });
+	}
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -- markup comes from our own pure
+     render math over numeric parameters; never user-controlled input. -->
+<svg
+	use:press
+	viewBox="-100 -100 200 200"
+	width={size}
+	height={size}
+	shape-rendering="geometricPrecision"
+	role="img"
+	aria-label="signalnine"
+	class={className}>{@html markup}</svg
+>