@atmos.build/ui 0.1.0

package/dist/components/naut-avatar-engine.js

@@ -0,0 +1,803 @@
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+const lerp = (a, b, t) => a + (b - a) * t;
+const approach = (cur, tgt, rate, dt) => cur + (tgt - cur) * (1 - Math.exp(-rate * dt));
+const easeInOut = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
+function rng(seed) {
+    let s = seed >>> 0 || 1;
+    return () => {
+        s = (s * 1664525 + 1013904223) >>> 0;
+        return s / 4294967296;
+    };
+}
+const NODE_SLOTS = [0, 1, 2, 3, 4, 5];
+const NODE_COUNT = 12;
+const norm = (v) => {
+    const l = Math.hypot(v[0], v[1]) || 1;
+    return [v[0] / l, v[1] / l];
+};
+const node = (p, hIn, hOut) => [
+    p[0],
+    p[1],
+    hIn[0],
+    hIn[1],
+    hOut[0],
+    hOut[1],
+];
+const ring = (items, i, fallback) => items[((i % items.length) + items.length) % items.length] ?? fallback;
+/** Rounded regular polygon as exactly 12 cubic nodes so every shape morphs into every other. */
+function roundedPolygon(n, R, rc, rot, yShift = 0) {
+    const vertex = (k) => {
+        const a = rot + (k * 2 * Math.PI) / n;
+        return [Math.cos(a) * R, Math.sin(a) * R];
+    };
+    const turn = (2 * Math.PI) / n;
+    const interior = Math.PI - turn;
+    const t = rc / Math.tan(interior / 2);
+    const k = (4 / 3) * Math.tan(turn / 4) * rc;
+    const extra = NODE_COUNT / n - 2;
+    const nodes = [];
+    for (let i = 0; i < n; i++) {
+        const P = vertex(i);
+        const Pp = vertex(i - 1);
+        const Pn = vertex(i + 1);
+        const dIn = norm([P[0] - Pp[0], P[1] - Pp[1]]);
+        const dOut = norm([Pn[0] - P[0], Pn[1] - P[1]]);
+        const A = [P[0] - dIn[0] * t, P[1] - dIn[1] * t];
+        const B = [P[0] + dOut[0] * t, P[1] + dOut[1] * t];
+        const An = [Pn[0] - dOut[0] * t, Pn[1] - dOut[1] * t];
+        const edge = [An[0] - B[0], An[1] - B[1]];
+        const segs = extra + 1;
+        nodes.push(node(A, A, [A[0] + dIn[0] * k, A[1] + dIn[1] * k]));
+        nodes.push(node(B, [B[0] - dOut[0] * k, B[1] - dOut[1] * k], [B[0] + edge[0] / segs / 3, B[1] + edge[1] / segs / 3]));
+        for (let j = 1; j <= extra; j++) {
+            const Q = [B[0] + (edge[0] * j) / segs, B[1] + (edge[1] * j) / segs];
+            nodes.push(node(Q, [Q[0] - edge[0] / segs / 3, Q[1] - edge[1] / segs / 3], [Q[0] + edge[0] / segs / 3, Q[1] + edge[1] / segs / 3]));
+        }
+    }
+    // The first node of each corner gets its incoming handle from the node before it,
+    // which is only known once the previous corner's edge nodes exist.
+    nodes.forEach((cur, i) => {
+        if (i % (extra + 2) !== 0)
+            return;
+        const prev = ring(nodes, i - 1, cur);
+        cur[2] = cur[0] - (cur[0] - prev[0]) / 3;
+        cur[3] = cur[1] - (cur[1] - prev[1]) / 3;
+    });
+    return nodes.map((nd) => [
+        nd[0],
+        nd[1] + yShift,
+        nd[2],
+        nd[3] + yShift,
+        nd[4],
+        nd[5] + yShift,
+    ]);
+}
+function circleNodes(R) {
+    const nodes = [];
+    const k = (4 / 3) * Math.tan(Math.PI / 24) * R;
+    for (let i = 0; i < NODE_COUNT; i++) {
+        const a = -Math.PI / 2 + (i * Math.PI) / 6;
+        const P = [Math.cos(a) * R, Math.sin(a) * R];
+        const tan = [-Math.sin(a), Math.cos(a)];
+        nodes.push(node(P, [P[0] - tan[0] * k, P[1] - tan[1] * k], [P[0] + tan[0] * k, P[1] + tan[1] * k]));
+    }
+    return nodes;
+}
+export const NAUT_SHAPES = ['circle', 'squircle', 'triangle', 'diamond', 'hexagon'];
+const SHAPES = {
+    circle: { sphere: 100, eyeY: 0, nodes: circleNodes(100) },
+    squircle: { sphere: 100, eyeY: 0, nodes: roundedPolygon(4, 136, 46, (-Math.PI * 3) / 4) },
+    triangle: { sphere: 62, eyeY: 14, nodes: roundedPolygon(3, 122, 22, -Math.PI / 2, 28) },
+    diamond: { sphere: 68, eyeY: 0, nodes: roundedPolygon(4, 112, 18, -Math.PI / 2) },
+    hexagon: { sphere: 88, eyeY: 0, nodes: roundedPolygon(6, 106, 18, -Math.PI / 2) },
+};
+export const NAUT_COLORS = {
+    ink: '#111216',
+    slate: '#4b5163',
+    coral: '#ef6f4f',
+    sun: '#f0b429',
+    mint: '#2fb585',
+    sky: '#3d9ff0',
+    lavender: '#8b7cf2',
+    rose: '#ec5f98',
+    ocean: '#3162e8',
+    forest: '#2f6b4f',
+    plum: '#6b3a8e',
+    clay: '#b5654b',
+};
+export const NAUT_COLOR_KEYS = Object.keys(NAUT_COLORS);
+export const isNautShape = (v) => typeof v === 'string' && NAUT_SHAPES.includes(v);
+export const isNautColor = (v) => typeof v === 'string' && v in NAUT_COLORS;
+const EYE_PARAMS = [
+    'w',
+    'h',
+    'topCut',
+    'topSlant',
+    'botCut',
+    'botSlant',
+    'smile',
+    'tilt',
+    'cross',
+    'pill',
+    'round',
+];
+const NEUTRAL_EYE = {
+    w: 8,
+    h: 17,
+    topCut: 0,
+    topSlant: 0,
+    botCut: 0,
+    botSlant: 0,
+    smile: 0,
+    tilt: 0,
+    cross: 0,
+    pill: 1,
+    round: 0.5,
+};
+const NEUTRAL_HEAD = {
+    eyeSep: 0.3,
+    eyeLat: 0.08,
+    curve: 1,
+    gazeX: 0,
+    gazeY: 0,
+    spin: 0,
+    roll: 0,
+    headX: 0,
+    headY: 0,
+    sx: 1,
+    sy: 1,
+};
+const eyeKey = (param, side) => `${param}${side}`;
+function expandFace(spec) {
+    const out = {};
+    for (const [k, v] of Object.entries(spec)) {
+        if (v === undefined)
+            continue;
+        if (EYE_PARAMS.includes(k)) {
+            const param = k;
+            out[eyeKey(param, 'L')] = v;
+            out[eyeKey(param, 'R')] = v;
+        }
+        else
+            out[k] = v;
+    }
+    return out;
+}
+const NEUTRAL = { ...expandFace(NEUTRAL_EYE), ...NEUTRAL_HEAD };
+const FACE_KEYS = Object.keys(NEUTRAL);
+export const NAUT_EXPRESSIONS = [
+    'neutral',
+    'happy',
+    'angry',
+    'surprised',
+    'thinking',
+    'sad',
+    'sleepy',
+    'excited',
+    'error',
+    'confused',
+    'wink',
+    'focused',
+    'laughing',
+    'scared',
+    'smug',
+    'talking',
+    'loading',
+];
+const EXPRESSIONS = {
+    neutral: { face: {} },
+    happy: {
+        face: { smile: 1, w: 13, h: 12, pill: 0, round: 1 },
+        loop: (t, o) => {
+            o.headY += -1.5 * Math.abs(Math.sin(t * 4));
+        },
+    },
+    angry: {
+        face: { topCut: 0.45, topSlant: 24, round: 0.3, gazeY: 0.12 },
+        loop: (t, o) => {
+            o.headX += Math.sin(t * 60) * 0.7;
+        },
+    },
+    surprised: { face: { w: 11, h: 21, sy: 1.02 }, enter: 'pop' },
+    thinking: {
+        face: {
+            topCutL: 0.5,
+            topCutR: 0.25,
+            botCut: 0.1,
+            round: 0.3,
+            gazeX: 0.7,
+            gazeY: -0.7,
+            roll: -5,
+        },
+        loop: (t, o) => {
+            o.gazeX += Math.sin(t * 0.9) * 0.25;
+            o.gazeY += Math.cos(t * 1.3) * 0.08;
+            o.headY += Math.sin(t * 2.2) * 0.8;
+        },
+    },
+    sad: {
+        face: { topCut: 0.4, topSlant: -20, round: 0.4, gazeY: 0.6, headY: 5, roll: 4 },
+        loop: (t, o) => {
+            o.roll += Math.sin(t * 1.4) * 1.2;
+            o.headY += Math.sin(t * 1.1) * 1;
+        },
+    },
+    sleepy: {
+        face: { topCut: 0.55, botCut: 0, round: 0.6, gazeY: 0.25, headY: 3 },
+        loop: (t, o) => {
+            const s = Math.max(0, Math.sin(t * 1.2));
+            o.topCutL += s * 0.25;
+            o.topCutR += s * 0.25;
+            o.headY += Math.sin(t * 0.6) * 2;
+            o.roll += Math.sin(t * 0.6) * 2;
+        },
+    },
+    excited: {
+        face: { w: 9.5, h: 21 },
+        loop: (t, o) => {
+            o.headY += -3 * Math.abs(Math.sin(t * 7));
+            o.roll += Math.sin(t * 7) * 2;
+        },
+    },
+    error: {
+        face: { cross: 1, w: 15, h: 15, pill: 0, round: 0.2 },
+        loop: (t, o) => {
+            o.headX += Math.sin(t * 90) * Math.exp(-(t % 2.4) * 3) * 3;
+        },
+    },
+    confused: {
+        face: { topCutL: 0.35, topSlantL: -14, round: 0.4, gazeX: 0.35, gazeY: -0.2, roll: 9 },
+        loop: (t, o) => {
+            o.gazeX += Math.sin(t * 1.1) * 0.3;
+            o.roll += Math.sin(t * 0.7) * 3;
+        },
+    },
+    wink: { face: { topCutR: 0.5, botCutR: 0.44, smileL: 0.35, round: 0.6, roll: -3 } },
+    focused: {
+        face: { topCut: 0.28, botCut: 0.22, round: 0.25, w: 8.5, h: 17 },
+        loop: (t, o) => {
+            o.headY += Math.sin(t * 1.2) * 0.3;
+        },
+    },
+    laughing: {
+        face: { smile: 1, w: 14, h: 12, pill: 0, round: 1, gazeY: -0.15 },
+        loop: (t, o) => {
+            o.headY += -2.5 * Math.abs(Math.sin(t * 11));
+            o.roll += Math.sin(t * 11) * 2.5;
+            o.sy += Math.abs(Math.sin(t * 11)) * 0.02;
+        },
+    },
+    scared: {
+        face: { w: 7, h: 14, eyeSep: 0.38, gazeY: -0.1 },
+        loop: (t, o) => {
+            o.headX += Math.sin(t * 70) * 1.2;
+            o.gazeX += Math.sin(t * 9) * 0.12;
+        },
+    },
+    smug: { face: { topCut: 0.42, topSlant: -8, round: 0.3, gazeX: 0.45, roll: -4, smile: 0.25 } },
+    talking: {
+        face: {},
+        loop: (t, o) => {
+            const s = Math.abs(Math.sin(t * 9)) * 0.55 + Math.abs(Math.sin(t * 5.3)) * 0.45;
+            o.hL += s * 3;
+            o.hR += s * 3;
+            o.headY += Math.sin(t * 9) * 0.6;
+            o.gazeY += -0.08 * s;
+        },
+    },
+    loading: {
+        face: { w: 7, h: 7, round: 1 },
+        loop: (t, o) => {
+            o.gazeX += Math.cos(t * 3) * 0.75;
+            o.gazeY += Math.sin(t * 3) * 0.55;
+        },
+    },
+};
+export const NAUT_GESTURES = [
+    'nod',
+    'shake',
+    'blink',
+    'wink',
+    'bounce',
+    'jump',
+    'spin',
+    'lookAround',
+    'shiver',
+    'celebrate',
+    'nope',
+    'pop',
+];
+const GESTURES = {
+    nod: {
+        dur: 1.1,
+        fn: (t, o) => {
+            const s = Math.pow(Math.sin(t * Math.PI * 2), 2) * (1 - t * 0.3);
+            o.gazeY += 0.9 * s;
+            o.headY += 6 * s;
+            o.sy -= 0.04 * s;
+        },
+    },
+    shake: {
+        dur: 1.0,
+        fn: (t, o) => {
+            const env = Math.sin(t * Math.PI);
+            const w = Math.sin(t * Math.PI * 2 * 2.5);
+            o.gazeX += 0.9 * w * env;
+            o.headX += 6 * w * env;
+        },
+    },
+    blink: {
+        dur: 0.22,
+        fn: (t, o) => {
+            const s = Math.sin(t * Math.PI);
+            o.topCutL += 0.5 * s;
+            o.topCutR += 0.5 * s;
+            o.botCutL += 0.5 * s;
+            o.botCutR += 0.5 * s;
+        },
+    },
+    wink: {
+        dur: 0.5,
+        fn: (t, o) => {
+            const s = Math.sin(t * Math.PI);
+            o.topCutR += 0.5 * s;
+            o.botCutR += 0.45 * s;
+            o.roll += -3 * s;
+        },
+    },
+    bounce: {
+        dur: 0.7,
+        fn: (t, o) => {
+            const up = Math.sin(t * Math.PI);
+            o.headY += -30 * up;
+            const sq = Math.sin(t * Math.PI * 2);
+            o.sy += 0.1 * sq * (1 - t);
+            o.sx -= 0.08 * sq * (1 - t);
+        },
+    },
+    jump: {
+        dur: 0.9,
+        fn: (t, o) => {
+            const up = Math.sin(t * Math.PI);
+            o.headY += -55 * up;
+            o.gazeY += -0.4 * up;
+            const sq = Math.sin(t * Math.PI * 2);
+            o.sy += 0.12 * sq * (1 - t);
+            o.sx -= 0.1 * sq * (1 - t);
+        },
+    },
+    spin: {
+        dur: 1.0,
+        fn: (t, o) => {
+            o.spin += Math.PI * 2 * easeInOut(t);
+        },
+    },
+    lookAround: {
+        dur: 2.4,
+        fn: (t, o) => {
+            const env = Math.sin(t * Math.PI);
+            o.gazeX += -Math.sin(t * Math.PI * 2) * 0.95 * Math.min(1, env * 3);
+            o.gazeY += -0.25 * env;
+        },
+    },
+    shiver: {
+        dur: 1.0,
+        fn: (t, o) => {
+            const env = Math.sin(t * Math.PI);
+            o.headX += Math.sin(t * 90) * 2 * env;
+            o.wL -= 1.5 * env;
+            o.wR -= 1.5 * env;
+        },
+    },
+    celebrate: {
+        dur: 1.4,
+        fn: (t, o) => {
+            const b = Math.abs(Math.sin(t * Math.PI * 2));
+            o.headY += -22 * b;
+            o.roll += Math.sin(t * Math.PI * 4) * 8;
+            const s = Math.sin(t * Math.PI);
+            o.smileL += s;
+            o.smileR += s;
+            o.wL += 4 * s;
+            o.wR += 4 * s;
+            o.hL -= 4 * s;
+            o.hR -= 4 * s;
+            o.pillL -= s;
+            o.pillR -= s;
+        },
+    },
+    nope: {
+        dur: 1.3,
+        fn: (t, o) => {
+            const env = Math.sin(t * Math.PI);
+            const w = Math.sin(t * Math.PI * 2 * 3.5);
+            o.gazeX += 0.8 * w * env;
+            o.headX += 5 * w * env;
+            o.topCutL += 0.5 * env;
+            o.topCutR += 0.5 * env;
+            o.botCutL += 0.44 * env;
+            o.botCutR += 0.44 * env;
+        },
+    },
+    pop: {
+        dur: 0.5,
+        fn: (t, o) => {
+            const s = Math.sin(t * Math.PI) * Math.exp(-t * 2);
+            o.sx += 0.1 * s;
+            o.sy += 0.1 * s;
+        },
+    },
+};
+// ---------- eye geometry: one closed polygon per eye, in the eye's local tangent plane ----------
+const EYE_SAMPLES = 40;
+const crossR = (a) => 0.32 + 0.68 * Math.pow(Math.abs(Math.sin(2 * a)), 8);
+function stadiumR(a, w, h) {
+    const c = Math.cos(a);
+    const s = Math.sin(a);
+    const ac = Math.abs(c) + 1e-9;
+    const as = Math.abs(s) + 1e-9;
+    const r = Math.min(w, h);
+    const kx = w - r;
+    const ky = h - r;
+    const rectA = Math.min(w / ac, ky / as);
+    const rectB = Math.min(kx / ac, h / as);
+    const circ = (cx, cy) => {
+        const dc = c * cx + s * cy;
+        const disc = dc * dc - (cx * cx + cy * cy) + r * r;
+        return disc < 0 ? 0 : dc + Math.sqrt(disc);
+    };
+    return Math.max(rectA, rectB, circ(kx, ky), circ(-kx, ky), circ(kx, -ky), circ(-kx, -ky));
+}
+function clipHalfPlane(pts, f) {
+    const out = [];
+    pts.forEach((a, i) => {
+        const b = ring(pts, i + 1, a);
+        const fa = f(a);
+        const fb = f(b);
+        if (fa >= 0)
+            out.push(a);
+        if (fa >= 0 !== fb >= 0) {
+            const t = fa / (fa - fb);
+            out.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);
+        }
+    });
+    return out;
+}
+function chaikin(pts, ratio) {
+    if (ratio <= 0.001 || pts.length < 3)
+        return pts;
+    const out = [];
+    pts.forEach((a, i) => {
+        const b = ring(pts, i + 1, a);
+        out.push([lerp(a[0], b[0], ratio), lerp(a[1], b[1], ratio)], [lerp(a[0], b[0], 1 - ratio), lerp(a[1], b[1], 1 - ratio)]);
+    });
+    return out;
+}
+function circleHit(pIn, pOut, cx, cy, r) {
+    const dx = pOut[0] - pIn[0];
+    const dy = pOut[1] - pIn[1];
+    const fx = pIn[0] - cx;
+    const fy = pIn[1] - cy;
+    const a = dx * dx + dy * dy;
+    const b = 2 * (fx * dx + fy * dy);
+    const c = fx * fx + fy * fy - r * r;
+    const t = clamp((-b + Math.sqrt(Math.max(0, b * b - 4 * a * c))) / (2 * a), 0, 1);
+    return [pIn[0] + dx * t, pIn[1] + dy * t];
+}
+/** Crescent = eye boundary outside the circle + the circle arc that runs through the eye. */
+function subtractCircle(pts, cx, cy, r) {
+    const n = pts.length;
+    const inside = pts.map((q) => Math.hypot(q[0] - cx, q[1] - cy) < r);
+    if (!inside.some(Boolean))
+        return pts;
+    if (inside.every(Boolean))
+        return [];
+    const start = inside.findIndex((isIn, i) => !isIn && ring(inside, i - 1, false));
+    if (start < 0)
+        return pts;
+    const origin = [0, 0];
+    const startPt = ring(pts, start, origin);
+    const entry = circleHit(ring(pts, start - 1, origin), startPt, cx, cy, r);
+    const out = [entry];
+    let i = start;
+    while (!ring(inside, i, true)) {
+        out.push(ring(pts, i, origin));
+        i = (i + 1) % n;
+        if (i === start)
+            break;
+    }
+    const exit = circleHit(ring(pts, i, origin), ring(pts, i - 1, origin), cx, cy, r);
+    out.push(exit);
+    const a1 = Math.atan2(exit[1] - cy, exit[0] - cx);
+    const a2 = Math.atan2(entry[1] - cy, entry[0] - cx);
+    let delta = a2 - a1;
+    while (delta <= 0)
+        delta += Math.PI * 2;
+    const midCW = [cx + Math.cos(a1 + delta / 2) * r, cy + Math.sin(a1 + delta / 2) * r];
+    const midCCW = [
+        cx + Math.cos(a1 - (Math.PI * 2 - delta) / 2) * r,
+        cy + Math.sin(a1 - (Math.PI * 2 - delta) / 2) * r,
+    ];
+    const cw = Math.hypot(midCW[0], midCW[1]) < Math.hypot(midCCW[0], midCCW[1]);
+    const span = cw ? delta : -(Math.PI * 2 - delta);
+    for (let k = 1; k < 18; k++) {
+        const a = a1 + (span * k) / 18;
+        out.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+    }
+    return out;
+}
+function eyePolygon(p, sgn) {
+    const w = Math.max(p.w, 0.5);
+    const h = Math.max(p.h, 0.5);
+    const cross = clamp(p.cross, 0, 1);
+    const pill = clamp(p.pill, 0, 1);
+    let pts = [];
+    for (let i = 0; i < EYE_SAMPLES; i++) {
+        const a = (i / EYE_SAMPLES) * Math.PI * 2;
+        const ellipseR = 1 / Math.hypot(Math.cos(a) / w, Math.sin(a) / h);
+        const baseR = lerp(ellipseR, stadiumR(a, w, h), pill);
+        const r = (1 - cross) * baseR + cross * crossR(a) * Math.max(w, h);
+        pts.push([Math.cos(a) * r, Math.sin(a) * r]);
+    }
+    let topCut = clamp(p.topCut, 0, 1);
+    let botCut = clamp(p.botCut, 0, 1);
+    const total = topCut + botCut;
+    if (total > 0.94) {
+        topCut *= 0.94 / total;
+        botCut *= 0.94 / total;
+    }
+    const topY = -h + topCut * 2 * h;
+    const botY = h - botCut * 2 * h;
+    const kt = Math.tan((p.topSlant * Math.PI) / 180);
+    const kb = Math.tan((p.botSlant * Math.PI) / 180);
+    if (topCut > 0.001 || Math.abs(kt) > 0.001)
+        pts = clipHalfPlane(pts, (q) => q[1] - (topY - sgn * q[0] * kt));
+    if (botCut > 0.001 || Math.abs(kb) > 0.001)
+        pts = clipHalfPlane(pts, (q) => botY - sgn * q[0] * kb - q[1]);
+    const smile = clamp(p.smile, 0, 1);
+    if (smile > 0.001) {
+        const cr = Math.max(w, h) * 1.05;
+        pts = subtractCircle(pts, 0, lerp(h + cr + 2, cr - h * 0.58, smile), cr);
+    }
+    if (pts.length < 3)
+        return [];
+    const ratio = 0.25 * clamp(p.round, 0, 1);
+    pts = chaikin(chaikin(pts, ratio), ratio);
+    const ang = (-sgn * p.tilt * Math.PI) / 180;
+    const ca = Math.cos(ang);
+    const sa = Math.sin(ang);
+    return pts.map((q) => [q[0] * ca - q[1] * sa, q[0] * sa + q[1] * ca]);
+}
+// ---------- sphere mapping: eyes sit on a ball; gaze rotates the ball ----------
+const rotY = (v, a) => {
+    const c = Math.cos(a);
+    const s = Math.sin(a);
+    return [v[0] * c + v[2] * s, v[1], -v[0] * s + v[2] * c];
+};
+const rotX = (v, a) => {
+    const c = Math.cos(a);
+    const s = Math.sin(a);
+    return [v[0], v[1] * c - v[2] * s, v[1] * s + v[2] * c];
+};
+function eyeFrame(lon, lat, yaw, pitch) {
+    const P = [Math.cos(lat) * Math.sin(lon), -Math.sin(lat), Math.cos(lat) * Math.cos(lon)];
+    const U = [Math.cos(lon), 0, -Math.sin(lon)];
+    const V = [Math.sin(lat) * Math.sin(lon), Math.cos(lat), Math.sin(lat) * Math.cos(lon)];
+    const R = (v) => rotX(rotY(v, yaw), pitch);
+    return { P: R(P), U: R(U), V: R(V) };
+}
+function nodePath(nodes) {
+    const first = nodes[0];
+    if (!first)
+        return '';
+    let d = `M ${first[0].toFixed(2)} ${first[1].toFixed(2)}`;
+    nodes.forEach((a, i) => {
+        const b = ring(nodes, i + 1, a);
+        d += ` C ${a[4].toFixed(2)} ${a[5].toFixed(2)} ${b[2].toFixed(2)} ${b[3].toFixed(2)} ${b[0].toFixed(2)} ${b[1].toFixed(2)}`;
+    });
+    return d + ' Z';
+}
+const cloneNodes = (nodes) => nodes.map((n) => [n[0], n[1], n[2], n[3], n[4], n[5]]);
+export const NAUT_VIEWBOX = '-126 -126 252 252';
+/**
+ * Framework-agnostic renderer: owns the animation state and writes attributes onto the
+ * SVG elements it is given. Call `update(dt)` once per frame.
+ */
+export class NautAvatarEngine {
+    shape;
+    color;
+    expression;
+    idle;
+    /** Pointer/gaze target in [-1, 1]; null = no external gaze. */
+    gazeTarget = null;
+    rand;
+    time;
+    emotionTime = 0;
+    gestures = [];
+    nodes;
+    sphere;
+    eyeYOff;
+    face;
+    targetFace;
+    idleState = {
+        gazeX: 0,
+        gazeY: 0,
+        nextGaze: 1,
+        nextBlink: 2,
+        roll: 0,
+        nextRoll: 3,
+        curGazeX: 0,
+        curGazeY: 0,
+        curRoll: 0,
+    };
+    el = null;
+    constructor(opts = {}) {
+        this.rand = rng(opts.seed ?? 1);
+        this.shape = opts.shape ?? 'circle';
+        this.color = opts.color ?? 'ink';
+        this.expression = opts.expression ?? 'neutral';
+        this.idle = opts.idle ?? true;
+        this.time = this.rand() * 100;
+        this.idleState.nextBlink = 2 + this.rand() * 3;
+        this.nodes = cloneNodes(SHAPES[this.shape].nodes);
+        this.sphere = SHAPES[this.shape].sphere;
+        this.eyeYOff = SHAPES[this.shape].eyeY;
+        this.face = { ...NEUTRAL };
+        this.targetFace = { ...NEUTRAL };
+        this.setExpression(this.expression, true);
+    }
+    attach(el) {
+        this.el = el;
+    }
+    setShape(shape) {
+        this.shape = shape;
+    }
+    setColor(color) {
+        this.color = color;
+    }
+    setExpression(key, instant = false) {
+        const def = EXPRESSIONS[key];
+        const changed = key !== this.expression;
+        this.expression = key;
+        if (changed || instant)
+            this.emotionTime = 0;
+        this.targetFace = { ...NEUTRAL, ...expandFace(def.face) };
+        if (instant)
+            Object.assign(this.face, this.targetFace);
+        if (def.enter && !instant && changed)
+            this.play(def.enter);
+    }
+    play(key) {
+        this.gestures.push({ key, t: 0 });
+    }
+    /** Snap every tween to its target (used for static renders / reduced motion). */
+    settle() {
+        Object.assign(this.face, this.targetFace);
+        this.nodes = cloneNodes(SHAPES[this.shape].nodes);
+        this.sphere = SHAPES[this.shape].sphere;
+        this.eyeYOff = SHAPES[this.shape].eyeY;
+        this.gestures = [];
+    }
+    update(dt) {
+        this.time += dt;
+        this.emotionTime += dt;
+        const shape = SHAPES[this.shape];
+        this.nodes.forEach((cur, i) => {
+            const target = ring(shape.nodes, i, cur);
+            for (const j of NODE_SLOTS)
+                cur[j] = approach(cur[j], target[j], 8, dt);
+        });
+        this.sphere = approach(this.sphere, shape.sphere, 8, dt);
+        this.eyeYOff = approach(this.eyeYOff, shape.eyeY, 8, dt);
+        const f = this.face;
+        for (const k of FACE_KEYS)
+            f[k] = approach(f[k], this.targetFace[k], 9, dt);
+        const o = { ...f };
+        const def = EXPRESSIONS[this.expression];
+        if (def.loop)
+            def.loop(this.emotionTime, o);
+        this.updateIdle(dt, o);
+        for (const g of this.gestures) {
+            g.t += dt / GESTURES[g.key].dur;
+            GESTURES[g.key].fn(clamp(g.t, 0, 1), o);
+        }
+        this.gestures = this.gestures.filter((g) => g.t < 1);
+        this.render(o);
+    }
+    updateIdle(dt, o) {
+        const s = this.idleState;
+        if (this.idle) {
+            s.nextGaze -= dt;
+            if (s.nextGaze <= 0) {
+                if (this.rand() < 0.3) {
+                    s.gazeX = 0;
+                    s.gazeY = 0;
+                }
+                else {
+                    s.gazeX = (this.rand() * 2 - 1) * 0.8;
+                    s.gazeY = (this.rand() * 2 - 1) * 0.6;
+                }
+                s.nextGaze = 1.2 + this.rand() * 3.2;
+            }
+            s.nextBlink -= dt;
+            if (s.nextBlink <= 0) {
+                this.play('blink');
+                s.nextBlink = this.rand() < 0.2 ? 0.35 : 2.5 + this.rand() * 4;
+            }
+            s.nextRoll -= dt;
+            if (s.nextRoll <= 0) {
+                s.roll = (this.rand() * 2 - 1) * 3;
+                s.nextRoll = 2.5 + this.rand() * 4;
+            }
+            o.headY += Math.sin(this.time * 1.6) * 0.6;
+        }
+        else {
+            s.gazeX = 0;
+            s.gazeY = 0;
+            s.roll = 0;
+        }
+        s.curGazeX = approach(s.curGazeX, s.gazeX, 14, dt);
+        s.curGazeY = approach(s.curGazeY, s.gazeY, 14, dt);
+        s.curRoll = approach(s.curRoll, s.roll, 3, dt);
+        if (this.gazeTarget) {
+            s.curGazeX = approach(s.curGazeX, this.gazeTarget.x, 30, dt);
+            s.curGazeY = approach(s.curGazeY, this.gazeTarget.y, 30, dt);
+        }
+        o.gazeX += s.curGazeX;
+        o.gazeY += s.curGazeY;
+        o.roll += s.curRoll;
+    }
+    render(o) {
+        const el = this.el;
+        if (!el)
+            return;
+        el.root.setAttribute('transform', `translate(${o.headX.toFixed(2)} ${o.headY.toFixed(2)}) scale(${o.sx.toFixed(3)} ${o.sy.toFixed(3)})`);
+        el.body.setAttribute('d', nodePath(this.nodes));
+        el.body.setAttribute('fill', NAUT_COLORS[this.color]);
+        el.eyes.setAttribute('transform', `rotate(${o.roll.toFixed(2)})`);
+        const yaw = clamp(o.gazeX, -1.3, 1.3) * 0.85 + o.spin;
+        const pitch = -clamp(o.gazeY, -1.3, 1.3) * 0.7;
+        const R = this.sphere;
+        for (const side of ['L', 'R']) {
+            const sgn = side === 'L' ? -1 : 1;
+            const p = { ...NEUTRAL_EYE };
+            for (const k of EYE_PARAMS)
+                p[k] = o[eyeKey(k, side)];
+            const poly = eyePolygon(p, sgn);
+            const eye = side === 'L' ? el.eyeL : el.eyeR;
+            if (!poly.length) {
+                eye.setAttribute('d', '');
+                continue;
+            }
+            const fr = eyeFrame(sgn * o.eyeSep, o.eyeLat, yaw, pitch);
+            const curve = clamp(o.curve, 0, 1.5);
+            const cx = fr.P[0] * R;
+            const cy = fr.P[1] * R + this.eyeYOff;
+            const ux = lerp(1, fr.U[0], curve);
+            const uy = lerp(0, fr.U[1], curve);
+            const vx = lerp(0, fr.V[0], curve);
+            const vy = lerp(1, fr.V[1], curve);
+            const d = poly
+                .map(([lx, ly], i) => `${i ? 'L' : 'M'} ${(cx + ux * lx + vx * ly).toFixed(2)} ${(cy + uy * lx + vy * ly).toFixed(2)}`)
+                .join(' ');
+            eye.setAttribute('d', d + ' Z');
+            eye.style.opacity = fr.P[2] > 0 ? '1' : '0';
+        }
+    }
+}
+/** Stable pseudo-random pick so the same id always gets the same appearance. */
+export function hashSeed(input) {
+    let h = 2166136261;
+    for (let i = 0; i < input.length; i++) {
+        h ^= input.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return h >>> 0;
+}
+export function nautAppearanceForSeed(seed) {
+    const h = hashSeed(seed);
+    return {
+        shape: NAUT_SHAPES[h % NAUT_SHAPES.length] ?? 'circle',
+        color: NAUT_COLOR_KEYS[(h >>> 8) % NAUT_COLOR_KEYS.length] ?? 'ink',
+    };
+}