@doan-labs/peek 0.1.0

package/dist/index.js

@@ -0,0 +1,1700 @@
+// src/tables.ts
+var INK = {
+  ink: "#1A1918",
+  bone: "#F3F0E8",
+  paper: "#FFFDF8"
+};
+var FACES = {
+  diamond: {
+    body: { d: "M170 20L320 170L170 320L20 170Z" },
+    bottom: 320,
+    sink: 30,
+    eyes: [
+      [132.5, 155],
+      [207.5, 155]
+    ],
+    rx: 20,
+    ry: 27.5,
+    pr: 10,
+    brow: { y: 102.5, hw: 18.75, arch: 15, w: 5.62 },
+    cheeks: [
+      [117.5, 200],
+      [222.5, 200]
+    ],
+    crx: 11.25,
+    cry: 5.62,
+    mouth: { x: 170, y: 218.75, w: 15, d: 16.25, sw: 4.38 },
+    crown: {
+      poly: [
+        [170, 20],
+        [320, 170],
+        [170, 320],
+        [20, 170]
+      ],
+      r: 0
+    }
+  },
+  semicircle: {
+    body: { d: "M0 255A170 170 0 0 1 340 255Z" },
+    bottom: 255,
+    sink: 0,
+    eyes: [
+      [102.5, 175],
+      [237.5, 175]
+    ],
+    rx: 30,
+    ry: 25,
+    pr: 11.25,
+    brow: { y: 127.5, hw: 25, arch: 15, w: 5.62 },
+    cheeks: [
+      [55, 212.5],
+      [285, 212.5]
+    ],
+    crx: 11.25,
+    cry: 5.62,
+    mouth: { x: 170, y: 221.25, w: 16.25, d: 16.25, sw: 4.38 },
+    crown: { poly: [[170, 255]], r: 170 }
+  },
+  circle: {
+    body: { circle: [170, 170, 150] },
+    bottom: 320,
+    sink: 20,
+    eyes: [
+      [112.8, 162.2],
+      [227.2, 162.2]
+    ],
+    rx: 29.9,
+    ry: 29.9,
+    pr: 13,
+    brow: { y: 110.2, hw: 23.4, arch: 15.6, w: 5.85 },
+    cheeks: [
+      [84.2, 203.8],
+      [255.8, 203.8]
+    ],
+    crx: 11.7,
+    cry: 5.85,
+    mouth: { x: 170, y: 223.3, w: 16.9, d: 16.9, sw: 4.55 },
+    crown: { poly: [[170, 170]], r: 150 }
+  },
+  triangle: {
+    body: { d: "M170 40.8L312.8 299.2L27.2 299.2Z", stroke: 27.2 },
+    bottom: 312.8,
+    sink: 0,
+    eyes: [
+      [132.6, 210.8],
+      [207.4, 210.8]
+    ],
+    rx: 20.4,
+    ry: 27.2,
+    pr: 10,
+    brow: { y: 166.6, hw: 18.7, arch: 15.3, w: 5.62 },
+    cheeks: [
+      [98.6, 238],
+      [241.4, 238]
+    ],
+    crx: 11.5,
+    cry: 5.75,
+    mouth: { x: 170, y: 254, w: 17, d: 16.25, sw: 4.38 },
+    crown: {
+      poly: [
+        [170, 40.8],
+        [312.8, 299.2],
+        [27.2, 299.2]
+      ],
+      r: 13.6
+    }
+  }
+};
+var COLORS = {
+  lavender: { body: "#D8CDF0", deep: "#BDAEE6" },
+  fog: { body: "#C8D6E8", deep: "#A8BCDC" },
+  clay: { body: "#F1CDBF", deep: "#E2A893" },
+  mint: { body: "#CFE7D6", deep: "#A5CDB1" },
+  butter: { body: "#ECE2B9", deep: "#D9C284" },
+  rose: { body: "#EFCAD7", deep: "#DFA4BA" },
+  aqua: { body: "#BDE1E5", deep: "#8FC7D1" }
+};
+var PARTS = {
+  eyes: ["oval", "bead", "ring"],
+  brows: ["arch", "bar", "wedge", "dash"],
+  mouth: ["poly", "round", "line", "box"],
+  cheeks: ["oval", "dots", "lines"],
+  trait: ["square", "fin", "ring", "dot", "peak"]
+};
+var VERSIONS = {
+  1: { face: 4, color: 7, eyes: 3, brows: 4, mouth: 4, cheeks: 3, trait: 5 }
+};
+var LATEST = 1;
+var GROUPS = {
+  eyes: ["lid", "lower", "lidTilt", "eyeS", "lidAsym"],
+  pupil: ["pupil", "gx", "gy", "shine"],
+  brows: ["browY", "browTilt", "browArch", "browW", "browAsym"],
+  mouth: ["mw", "mt", "mb", "mx", "my", "mk"],
+  body: ["alt", "rot", "x", "sx", "sy"],
+  extra: ["blush", "hair", "dim", "thing"]
+};
+var BASE = {
+  alt: 0,
+  rot: 0,
+  x: 0,
+  sx: 1,
+  sy: 1,
+  lid: 0.1,
+  lower: 0,
+  lidTilt: 0,
+  eyeS: 1,
+  lidAsym: 0,
+  pupil: 1,
+  gx: 0,
+  gy: 0,
+  shine: 0.7,
+  browY: 0,
+  browTilt: 0,
+  browArch: 0.4,
+  browW: 1,
+  browAsym: 0,
+  mw: 0.72,
+  mt: 0,
+  mb: 0.5,
+  mx: 0,
+  my: 0,
+  mk: 0,
+  blush: 0,
+  hair: 0,
+  dim: 0,
+  thing: 0
+};
+var S = (o) => ({ ...BASE, ...o });
+var EXPRESSIONS = {
+  normal: S({}),
+  happy: S({
+    lid: 0,
+    lower: 0.42,
+    shine: 1,
+    gy: -0.05,
+    browY: -5,
+    browArch: 1,
+    mw: 1,
+    mb: 1,
+    blush: 1,
+    hair: 0.45,
+    alt: 0.05
+  }),
+  sad: S({
+    lid: 0.42,
+    lidTilt: 16,
+    pupil: 0.95,
+    gy: 0.8,
+    shine: 0,
+    browY: 3,
+    browTilt: 14,
+    browArch: 0,
+    mw: 0.8,
+    mt: -0.55,
+    mb: -0.55,
+    my: 6,
+    alt: -0.16,
+    sy: 0.985,
+    hair: -0.75
+  }),
+  angry: S({
+    lid: 0.34,
+    lidTilt: -22,
+    lower: 0.12,
+    pupil: 0.82,
+    gy: 0.1,
+    shine: 0,
+    browY: 5,
+    browTilt: -21,
+    browArch: 0,
+    browW: 1.3,
+    mw: 0.8,
+    mt: -0.08,
+    mb: -0.08,
+    my: 3,
+    sx: 1.02,
+    sy: 0.98,
+    hair: 0.25
+  }),
+  sleepy: S({
+    lid: 1,
+    lidTilt: 4,
+    pupil: 0.9,
+    gy: 0.5,
+    shine: 0,
+    browY: 6,
+    browTilt: 3,
+    browArch: 0.15,
+    browW: 0.9,
+    mw: 0.35,
+    mt: -0.3,
+    mb: 0.3,
+    my: 2,
+    alt: -1.12,
+    rot: -3,
+    hair: -1
+  }),
+  curious: S({
+    lid: 0,
+    eyeS: 1.06,
+    pupil: 1.05,
+    shine: 1,
+    browY: -3,
+    browAsym: 9,
+    browArch: 0.8,
+    mw: 0.38,
+    mt: -0.36,
+    mb: 0.36,
+    rot: 6,
+    alt: -0.32,
+    hair: 0.3,
+    thing: 1
+  }),
+  surprised: S({
+    lid: 0,
+    eyeS: 1.2,
+    pupil: 0.66,
+    shine: 0.8,
+    browY: -13,
+    browArch: 1,
+    mw: 0.55,
+    mt: -0.62,
+    mb: 0.62,
+    alt: 0.36,
+    hair: 1
+  }),
+  excited: S({
+    lid: 0,
+    lower: 0.5,
+    eyeS: 1.08,
+    pupil: 1.08,
+    shine: 1,
+    browY: -9,
+    browArch: 1,
+    mw: 1.15,
+    mb: 1.3,
+    blush: 1,
+    hair: 1,
+    alt: 0.12
+  }),
+  confused: S({
+    lid: 0.22,
+    lidAsym: 0.28,
+    lidTilt: -4,
+    pupil: 0.92,
+    gx: -0.35,
+    gy: -0.45,
+    shine: 0.3,
+    browY: -2,
+    browAsym: 11,
+    browTilt: -5,
+    browArch: 0.3,
+    mw: 0.6,
+    mt: -0.1,
+    mb: 0.12,
+    mx: 5,
+    mk: 13,
+    rot: -7,
+    alt: -0.05,
+    hair: 0.1
+  }),
+  bored: S({
+    lid: 0.5,
+    pupil: 0.9,
+    gx: -0.55,
+    gy: 0.25,
+    shine: 0,
+    browY: 3,
+    browArch: 0.1,
+    mw: 0.55,
+    mt: 0,
+    mb: 0.04,
+    mx: -5,
+    alt: -0.34,
+    hair: -0.45,
+    dim: 1
+  }),
+  attentive: S({
+    lid: 0,
+    eyeS: 1.1,
+    pupil: 0.8,
+    gy: -0.1,
+    shine: 1,
+    browY: -7,
+    browArch: 0.7,
+    mw: 0.55,
+    mb: 0.4,
+    alt: 0.15,
+    sy: 1.03,
+    hair: 0.65
+  })
+};
+
+// src/identity.ts
+var STYLE = "peek";
+var tidy = (s) => s.normalize("NFC").trim().replace(/\s+/g, " ").toLowerCase();
+function fnv1a(str) {
+  let h = 2166136261;
+  for (const b of new TextEncoder().encode(str)) {
+    h ^= b;
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h >>> 0;
+}
+function mulberry32(a) {
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var LISTS = {
+  face: Object.keys(FACES),
+  color: Object.keys(COLORS),
+  ...PARTS
+};
+var AXES = Object.keys(LISTS);
+function seed(name, axis, version = LATEST) {
+  return fnv1a(`${STYLE}@${version}:${axis}:${tidy(name)}`);
+}
+function identify(name, { version = LATEST } = {}) {
+  const lengths = VERSIONS[version];
+  if (!lengths)
+    throw new Error(`peek@${version} does not exist`);
+  const pick = (axis) => LISTS[axis][seed(name, axis, version) % lengths[axis]];
+  const rnd = mulberry32(seed(name, "persona", version));
+  const r = (a, b) => Math.round((a + rnd() * (b - a)) * 100) / 100;
+  const persona = {
+    spread: r(-7, 7),
+    blink: r(0.75, 1.4),
+    add: {
+      browY: r(-4, 4),
+      browTilt: r(-5, 5),
+      browArch: r(-0.2, 0.3),
+      rot: r(-3, 3),
+      hair: r(-0.2, 0.35),
+      gx: r(-0.12, 0.12),
+      my: r(-2, 3)
+    },
+    mul: {
+      eyeS: r(0.92, 1.08),
+      pupil: r(0.9, 1.12),
+      browW: r(0.85, 1.2),
+      mw: r(0.85, 1.18)
+    }
+  };
+  const key = tidy(name);
+  return {
+    key,
+    hash: fnv1a(key),
+    version,
+    face: pick("face"),
+    color: pick("color"),
+    eyes: pick("eyes"),
+    brows: pick("brows"),
+    mouth: pick("mouth"),
+    cheeks: pick("cheeks"),
+    trait: pick("trait"),
+    persona
+  };
+}
+// src/peek.tsx
+import {
+  createElement,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+
+// src/draw.ts
+var VB = [-30, -30, 400, 400];
+var FLOOR = 370;
+var THING = [330, 20];
+var clamp = (v, a, b) => v < a ? a : v > b ? b : v;
+var smooth = (a, b, v) => {
+  const t = clamp((v - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+var f2 = (v) => String(Math.round(v * 100) / 100);
+var f3 = (v) => String(Math.round(v * 1000) / 1000);
+var strokeFor = (px) => px >= 96 ? 1 : px >= 56 ? 1.25 : px >= 40 ? 1.6 : px >= 30 ? 2 : 2.4;
+var RAD = Math.PI / 180;
+function frameOf(face) {
+  const baseY = FLOOR + face.sink - face.bottom;
+  const eyeY = face.eyes[0][1];
+  return { baseY, eyeY, R: FLOOR - (eyeY + baseY) };
+}
+function thingGaze(face, x, alt) {
+  const { baseY, eyeY, R } = frameOf(face);
+  const ey = eyeY + baseY - alt * R;
+  return [
+    clamp((THING[0] - 170 - x) / 150, -1, 1),
+    clamp((THING[1] - ey) / 150, -1, 1)
+  ];
+}
+function restPose(who, expression, gaze) {
+  const s = EXPRESSIONS[expression];
+  const pose = { ...s, blink: 0, lag: 0, expression };
+  if (expression === "curious")
+    pose.rot = 7;
+  const g = gaze ?? (expression === "curious" ? thingGaze(FACES[who.face], 0, s.alt) : null);
+  if (g)
+    [pose.gx, pose.gy] = g;
+  return pose;
+}
+function seat(crown, d, u) {
+  const R = Math.max(0, crown.r + d);
+  const at = ([x, y], b2) => ({
+    x: x + R * Math.sin(b2),
+    y: y - R * Math.cos(b2),
+    a: b2 / RAD
+  });
+  const P = crown.poly;
+  if (P.length === 1)
+    return at(P[0], R ? u / R : 0);
+  const n = P.length;
+  const dir = u >= 0 ? 1 : -1;
+  let left = Math.abs(u);
+  let i = 0;
+  let b = 0;
+  for (let step = 0;step < n; step++) {
+    const j = (i + dir + n) % n;
+    const [x0, y0] = P[i];
+    const [x1, y1] = P[j];
+    const ex = x1 - x0;
+    const ey = y1 - y0;
+    const L = Math.hypot(ex, ey);
+    const nx = dir * ey / L;
+    const ny = -dir * ex / L;
+    const be = Math.atan2(nx, -ny);
+    let db = be - b;
+    while (dir * db < 0)
+      db += dir * 2 * Math.PI;
+    const arc = R * Math.abs(db);
+    if (left <= arc)
+      return at(P[i], R ? b + dir * left / R : b);
+    left -= arc;
+    if (left <= L)
+      return {
+        x: x0 + ex / L * left + R * nx,
+        y: y0 + ey / L * left + R * ny,
+        a: be / RAD
+      };
+    left -= L;
+    i = j;
+    b = be;
+  }
+  return at(P[i], b);
+}
+function depth(crown, x, y) {
+  const P = crown.poly;
+  if (P.length === 1)
+    return Math.hypot(x - P[0][0], y - P[0][1]) - crown.r;
+  let out = -Infinity;
+  let near = Infinity;
+  for (let i = 0;i < P.length; i++) {
+    const [ax, ay] = P[i];
+    const [bx, by] = P[(i + 1) % P.length];
+    const ex = bx - ax;
+    const ey = by - ay;
+    const L2 = ex * ex + ey * ey;
+    const L = Math.sqrt(L2);
+    out = Math.max(out, ((x - ax) * ey - (y - ay) * ex) / L);
+    const t = clamp(((x - ax) * ex + (y - ay) * ey) / L2, 0, 1);
+    near = Math.min(near, Math.hypot(x - ax - t * ex, y - ay - t * ey));
+  }
+  return (out <= 0 ? out : near) - crown.r;
+}
+var RING_U = 158 * 35 * RAD;
+function ringWalk(sh) {
+  const ex = sh.eyes[1][0] + sh.brow.hw + 7;
+  const top = sh.brow.y - 30;
+  const bottom = sh.brow.y + 8;
+  let u = RING_U;
+  for (;u < 400; u += 2) {
+    const s = seat(sh.crown, 8, u);
+    const dx = s.x - ex;
+    const dy = s.y - clamp(s.y, top, bottom);
+    if (s.x > ex ? Math.hypot(dx, dy) > 27 : s.y < top - 27)
+      break;
+  }
+  return u > RING_U ? { rest: u + 20, min: u } : { rest: u, min: -Infinity };
+}
+function n(tag, key, attrs, children = []) {
+  const out = {};
+  for (const k in attrs) {
+    const v = attrs[k];
+    if (v !== undefined && v !== false)
+      out[k] = String(v);
+  }
+  return { tag, key, attrs: out, children };
+}
+function prune(node) {
+  if (node.attrs.opacity === "0")
+    return null;
+  const children = node.children.map(prune).filter((c) => c !== null);
+  if (node.tag === "g" && children.length === 0)
+    return null;
+  return { ...node, children };
+}
+function draw(who, pose, o) {
+  const sh = FACES[who.face];
+  const { body: fill, deep } = COLORS[who.color];
+  const P = who.persona;
+  const mul = P.mul;
+  const add = P.add;
+  const g = (c) => pose[c] * (mul[c] ?? 1) + (add[c] ?? 0);
+  const spread = P.spread;
+  const id = o.id;
+  const st = strokeFor(o.size);
+  const { baseY, R } = frameOf(sh);
+  const defs = [];
+  const VBr = { x: VB[0], y: VB[1], width: VB[2], height: VB[3] };
+  defs.push(n("clipPath", "frame.clip", { id: `${id}-f` }, [
+    o.square ? n("rect", "frame.clip.shape", VBr) : n("circle", "frame.clip.shape", { cx: 170, cy: 170, r: 200 })
+  ]));
+  const k = o.riso ? smooth(120, 480, o.size) : 0;
+  const riso = k > 0.01;
+  const upp = VB[2] / Math.max(o.size, 1);
+  const mk = k * k;
+  const plate = (p, seedA, seedB, sc2) => n("filter", `riso.${p}`, {
+    id: `${id}-p${p}`,
+    x: "-20%",
+    y: "-20%",
+    width: "140%",
+    height: "140%",
+    "color-interpolation-filters": "sRGB"
+  }, [
+    n("feTurbulence", `riso.${p}.warp`, {
+      type: "fractalNoise",
+      baseFrequency: "0.032",
+      numOctaves: 2,
+      seed: seedA,
+      result: "warp"
+    }),
+    n("feDisplacementMap", `riso.${p}.disp`, {
+      in: "SourceGraphic",
+      in2: "warp",
+      scale: f2(sc2 * k),
+      xChannelSelector: "R",
+      yChannelSelector: "G",
+      result: "moved"
+    }),
+    n("feTurbulence", `riso.${p}.grain`, {
+      type: "fractalNoise",
+      baseFrequency: "0.85",
+      numOctaves: 2,
+      seed: seedB,
+      result: "grain"
+    }),
+    n("feColorMatrix", `riso.${p}.mask`, {
+      in: "grain",
+      type: "matrix",
+      values: `0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  ${f3(-8 * mk)} 0 0 0 ${f3(1 + 5.85 * mk)}`,
+      result: "mask"
+    }),
+    n("feComposite", `riso.${p}.out`, {
+      in: "moved",
+      in2: "mask",
+      operator: "in"
+    })
+  ]);
+  const grainy = riso && o.frame !== "none";
+  if (riso)
+    defs.push(plate("A", 4, 11, 3.2), plate("B", 9, 23, 2.2));
+  if (grainy) {
+    const [r, gg, b] = o.frame === "ink" ? [0.953, 0.941, 0.91] : [0.102, 0.098, 0.094];
+    defs.push(n("filter", "grain.filter", {
+      id: `${id}-grain`,
+      x: 0,
+      y: 0,
+      width: 1,
+      height: 1,
+      "color-interpolation-filters": "sRGB"
+    }, [
+      n("feTurbulence", "grain.noise", {
+        type: "fractalNoise",
+        baseFrequency: "0.9",
+        numOctaves: 2,
+        seed: 5
+      }),
+      n("feColorMatrix", "grain.matrix", {
+        type: "matrix",
+        values: `0 0 0 0 ${r}  0 0 0 0 ${gg}  0 0 0 0 ${b}  7 0 0 0 -5.1`
+      })
+    ]));
+  }
+  const dim = clamp(g("dim"), 0, 1);
+  if (o.live || dim > 0.01)
+    defs.push(n("filter", "dim.filter", { id: `${id}-dim`, "color-interpolation-filters": "sRGB" }, [
+      n("feColorMatrix", "dim.matrix", {
+        type: "saturate",
+        values: f3(1 - dim * 0.55)
+      })
+    ]));
+  const alt = g("alt");
+  const rot = g("rot");
+  const x = g("x");
+  const sx = g("sx");
+  const sy = g("sy");
+  const B = sh.bottom;
+  const ty = baseY - alt * R;
+  const sc = (v) => Math.round(v * 1e5) / 1e5;
+  const bodyNode = "d" in sh.body ? n("path", "body", {
+    d: sh.body.d,
+    fill,
+    stroke: sh.body.stroke ? fill : undefined,
+    "stroke-width": sh.body.stroke,
+    "stroke-linejoin": sh.body.stroke ? "round" : undefined
+  }) : n("circle", "body", {
+    cx: sh.body.circle[0],
+    cy: sh.body.circle[1],
+    r: sh.body.circle[2],
+    fill
+  });
+  const eyeS = g("eyeS");
+  const rx = sh.rx * eyeS;
+  const ry = sh.ry * eyeS;
+  const lid0 = g("lid");
+  const lidAsym = g("lidAsym");
+  const lower = clamp(g("lower"), 0, 1);
+  const blink = pose.blink;
+  const pupil = g("pupil");
+  const gx = clamp(g("gx"), -1.1, 1.1);
+  const gy = clamp(g("gy"), -1.1, 1.1);
+  const tilt = g("lidTilt");
+  const shine = clamp(g("shine"), 0, 1);
+  const sw = sh.brow.w * st;
+  const bead = who.eyes === "bead";
+  const eyes = sh.eyes.map(([ex, ey], i) => {
+    const side = i === 0 ? -1 : 1;
+    const kk = `eye${i}`;
+    let lid = clamp(lid0 + (i === 0 ? lidAsym : -lidAsym * 0.3), 0, 1);
+    lid = lid + (1 - lid) * blink;
+    defs.push(n("clipPath", `${kk}.clip`, { id: `${id}-e${i}` }, [
+      n("ellipse", `${kk}.clip.shape`, {
+        cx: 0,
+        cy: 0,
+        rx: f2(rx),
+        ry: f2(ry)
+      })
+    ]), n("clipPath", `${kk}.lidclip`, { id: `${id}-l${i}` }, [
+      n("ellipse", `${kk}.lidclip.shape`, {
+        cx: 0,
+        cy: 0,
+        rx: f2(rx + 1.6),
+        ry: f2(ry + 1.6)
+      })
+    ]));
+    const br = Math.min(sh.rx, sh.ry) * 0.62;
+    const pr = bead ? br * eyeS * (0.4 + 0.6 * pupil) : sh.pr * pupil;
+    const base = bead ? br : sh.pr;
+    const px = gx * Math.max(0, sh.rx - base) * 0.9;
+    const py = gy * Math.max(0, sh.ry - base) * 0.8;
+    const rimW = Math.min(sw * 0.8, Math.min(sh.rx, sh.ry) * 0.28);
+    const inner = [];
+    if (!bead)
+      inner.push(n("ellipse", `${kk}.white`, {
+        cx: 0,
+        cy: 0,
+        rx: f2(rx),
+        ry: f2(ry),
+        fill: INK.paper
+      }));
+    inner.push(n("circle", `${kk}.pupil`, {
+      cx: f2(px),
+      cy: f2(py),
+      r: f2(pr),
+      fill: INK.ink
+    }), n("circle", `${kk}.shine`, {
+      cx: f2(px + pr * 0.44),
+      cy: f2(py - pr * 0.44),
+      r: f2(pr * (bead ? 0.26 : 0.3)),
+      fill: INK.paper,
+      opacity: f2(shine)
+    }));
+    if (who.eyes === "ring")
+      inner.push(n("ellipse", `${kk}.rim`, {
+        cx: 0,
+        cy: 0,
+        rx: f2(rx - rimW / 2),
+        ry: f2(ry - rimW / 2),
+        fill: "none",
+        stroke: INK.ink,
+        "stroke-width": f2(rimW)
+      }));
+    const edge = -ry - 1.6 + lid * (2 * ry + 3.2);
+    const a = side * tilt;
+    const lrx = rx * 1.55;
+    const lry = ry * 1.15;
+    const top = ry + 1.6 - lower * ry * 1.5;
+    const parts = [
+      n("g", `${kk}.inner`, { "clip-path": `url(#${id}-e${i})` }, inner),
+      n("g", `${kk}.lids`, { "clip-path": `url(#${id}-l${i})` }, [
+        n("rect", `${kk}.lid`, {
+          x: f2(-rx * 2.2),
+          y: f2(-ry * 3),
+          width: f2(rx * 4.4),
+          height: f2(Math.max(0, edge + ry * 3)),
+          transform: `rotate(${f2(a)})`,
+          fill
+        }),
+        n("ellipse", `${kk}.lower`, {
+          cx: 0,
+          cy: f2(top + lry),
+          rx: f2(lrx),
+          ry: f2(lry),
+          fill
+        })
+      ])
+    ];
+    if (who.eyes === "ring")
+      parts.push(n("g", `${kk}.edges`, {
+        "clip-path": `url(#${id}-e${i})`,
+        fill: "none",
+        stroke: INK.ink,
+        "stroke-width": f2(rimW)
+      }, [
+        n("path", `${kk}.edge`, {
+          d: `M${f2(-rx * 2.2)} ${f2(edge)}H${f2(rx * 2.2)}`,
+          transform: `rotate(${f2(a)})`,
+          opacity: lid > 0.02 ? 1 : 0
+        }),
+        n("ellipse", `${kk}.edge.lower`, {
+          cx: 0,
+          cy: f2(top + lry),
+          rx: f2(lrx),
+          ry: f2(lry),
+          opacity: lower > 0.02 ? 1 : 0
+        })
+      ]));
+    const co = smooth(0.86, 1, lid);
+    const yy = Math.min(edge, ry) - 1;
+    const hw = rx * 0.92;
+    parts.push(n("path", `${kk}.closed`, {
+      d: `M${f2(-hw)} ${f2(yy - 2)}Q0 ${f2(yy + 6)} ${f2(hw)} ${f2(yy - 2)}`,
+      transform: `rotate(${f2(a * 0.6)})`,
+      fill: "none",
+      stroke: INK.ink,
+      "stroke-linecap": "round",
+      "stroke-width": f2(sw * 0.85),
+      opacity: co > 0.01 ? f2(co) : 0
+    }));
+    return n("g", kk, {
+      transform: bead ? `translate(${f2(ex + side * spread + gx * 6)} ${f2(ey + gy * 6)})` : `translate(${f2(ex + side * spread)} ${ey})`
+    }, parts);
+  });
+  const browY = g("browY") - (eyeS - 1) * sh.ry * 0.9;
+  const btilt = g("browTilt");
+  const arch = g("browArch");
+  const basym = g("browAsym");
+  const bw = sw * g("browW");
+  const brows = sh.eyes.map(([ex], i) => {
+    const side = i === 0 ? -1 : 1;
+    const hw = sh.brow.hw;
+    const c = -sh.brow.arch * arch;
+    const [w, ca, k2] = who.brows === "bar" ? [hw * 0.9, c * 0.3, 1.75] : who.brows === "dash" ? [hw * 0.42, c * 0.25, 1.9] : [hw, c, 1];
+    const ti = bw * 1.7;
+    const to = bw * 0.45;
+    const [tl, tr] = side < 0 ? [to, ti] : [ti, to];
+    const wedge = who.brows === "wedge";
+    const [hl, hr] = wedge ? [tl / 2 + to / 2, tr / 2 + to / 2] : [0, 0];
+    const half = (t) => wedge ? hl + (hr - hl) * t : bw * k2 / 2;
+    const bx = ex + side * spread;
+    const by = sh.brow.y + browY + (i === 1 ? -basym : basym * 0.3);
+    const cos = Math.cos(side * btilt * RAD);
+    const sin = Math.sin(side * btilt * RAD);
+    const inside = (dy) => {
+      for (let t = 0;t <= 1; t += 0.25) {
+        const lx = w * (2 * t - 1);
+        const ly = 2 * t * (1 - t) * ca;
+        const px = bx + lx * cos - ly * sin;
+        const py = by + dy + lx * sin + ly * cos;
+        if (depth(sh.crown, px, py) + half(t) + 2 > 0)
+          return false;
+      }
+      return true;
+    };
+    let lo = 0;
+    let hi = 0;
+    if (!inside(0)) {
+      hi = 40;
+      for (let k3 = 0;k3 < 12; k3++) {
+        const mid2 = (lo + hi) / 2;
+        if (inside(mid2))
+          hi = mid2;
+        else
+          lo = mid2;
+      }
+    }
+    const transform = `translate(${f2(bx)} ${f2(by + hi)}) rotate(${f2(side * btilt)})`;
+    const key = `brow${i}`;
+    if (wedge) {
+      const dm = (tl + tr) / 2 * 0.75;
+      return n("path", key, {
+        d: `M${f2(-hw)} ${f2(-tl / 2)}Q0 ${f2(c - dm)} ${f2(hw)} ${f2(-tr / 2)}L${f2(hw)} ${f2(tr / 2)}Q0 ${f2(c + dm)} ${f2(-hw)} ${f2(tl / 2)}Z`,
+        transform,
+        fill: INK.ink,
+        stroke: INK.ink,
+        "stroke-linejoin": "round",
+        "stroke-width": f2(to)
+      });
+    }
+    return n("path", key, {
+      d: `M${f2(-w)} 0Q0 ${f2(ca)} ${f2(w)} 0`,
+      transform,
+      fill: "none",
+      stroke: INK.ink,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": f2(bw * k2)
+    });
+  });
+  const m = sh.mouth;
+  const mw = m.w * Math.max(0.05, g("mw"));
+  const mt = g("mt") * m.d;
+  const mb = g("mb") * m.d;
+  const kb = 4 / 3;
+  const w7 = mw * 0.72;
+  const mid = (mt + mb) / 2 * kb;
+  const d = who.mouth === "poly" ? `M${f2(-mw)} 0L0 ${f2(mt)}L${f2(mw)} 0L0 ${f2(mb)}Z` : who.mouth === "box" ? `M${f2(-mw)} 0L${f2(-w7)} ${f2(mb)}L${f2(w7)} ${f2(mb)}L${f2(mw)} 0L${f2(w7)} ${f2(mt)}L${f2(-w7)} ${f2(mt)}Z` : who.mouth === "line" ? `M${f2(-mw)} 0C${f2(-mw * 0.5)} ${f2(mid)} ${f2(mw * 0.5)} ${f2(mid)} ${f2(mw)} 0` : `M${f2(-mw)} 0C${f2(-mw)} ${f2(mb * kb)} ${f2(mw)} ${f2(mb * kb)} ${f2(mw)} 0C${f2(mw)} ${f2(mt * kb)} ${f2(-mw)} ${f2(mt * kb)} ${f2(-mw)} 0Z`;
+  const open = who.mouth === "line";
+  const mouth = n("path", "mouth", {
+    d,
+    transform: `translate(${f2(m.x + g("mx"))} ${f2(m.y + g("my"))}) rotate(${f2(g("mk"))})`,
+    fill: open ? "none" : INK.ink,
+    stroke: INK.ink,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": f2(open ? sw : m.sw * st)
+  });
+  const blush = clamp(g("blush"), 0, 1);
+  const cheeks = sh.cheeks.map(([cx, cy], i) => {
+    const key = `cheek${i}`;
+    const at = {
+      opacity: f2(blush),
+      transform: `translate(${f2(cx + (i === 0 ? -1 : 1) * spread * 0.6)} ${f2(cy - lower * 4)}) scale(${f2(0.6 + 0.4 * blush)}) translate(${-cx} ${-cy})`
+    };
+    if (who.cheeks === "dots") {
+      const r = sh.cry * 0.9;
+      return n("g", key, { ...at, fill: deep }, [
+        n("circle", `${key}.0`, { cx: f2(cx - sh.crx * 1.05), cy, r: f2(r) }),
+        n("circle", `${key}.1`, { cx, cy: f2(cy + sh.cry * 0.5), r: f2(r) }),
+        n("circle", `${key}.2`, { cx: f2(cx + sh.crx * 1.05), cy, r: f2(r) })
+      ]);
+    }
+    if (who.cheeks === "lines") {
+      const h = sh.cry * 1.3;
+      return n("g", key, {
+        ...at,
+        fill: "none",
+        stroke: deep,
+        "stroke-linecap": "round",
+        "stroke-width": f2(sh.cry * 0.78)
+      }, [-1, 0, 1].map((j) => {
+        const x0 = cx + j * sh.crx * 0.8;
+        return n("path", `${key}.${j + 1}`, {
+          d: `M${f2(x0 + h * 0.5)} ${f2(cy - h)}L${f2(x0 - h * 0.5)} ${f2(cy + h)}`
+        });
+      }));
+    }
+    return n("ellipse", key, {
+      cx,
+      cy,
+      rx: sh.crx,
+      ry: sh.cry,
+      fill: deep,
+      ...at
+    });
+  });
+  const hair = g("hair");
+  const lag = pose.lag;
+  let traitT;
+  let shape;
+  if (who.trait === "square") {
+    const s = seat(sh.crown, 22 + hair * 10, 0);
+    traitT = `translate(${f2(s.x)} ${f2(s.y + lag)}) rotate(${f2(s.a + 22 + hair * 23)})`;
+    shape = n("rect", "trait.shape", {
+      x: -11,
+      y: -11,
+      width: 22,
+      height: 22,
+      fill: deep
+    });
+  } else if (who.trait === "fin") {
+    const s = seat(sh.crown, -6, -164 * 22 * RAD);
+    const r = s.a + (hair >= 0 ? hair * 20 : hair * 55) - lag * 0.8;
+    traitT = `translate(${f2(s.x)} ${f2(s.y + lag * 0.25)}) rotate(${f2(r)})`;
+    shape = n("path", "trait.shape", {
+      d: "M0 0L0 -40A40 40 0 0 1 40 0Z",
+      fill: deep
+    });
+  } else if (who.trait === "ring") {
+    const b = 35 - hair * 14 - (hair < 0 ? hair * -21 : 0) + lag * 0.9;
+    const w = ringWalk(sh);
+    const s = seat(sh.crown, 8, Math.max(w.min, w.rest + 158 * (b - 35) * RAD));
+    traitT = `translate(${f2(s.x)} ${f2(s.y)}) scale(${f2(1 + Math.max(0, hair) * 0.1)})`;
+    shape = n("circle", "trait.shape", {
+      cx: 0,
+      cy: 0,
+      r: 12.5,
+      fill: "none",
+      stroke: deep,
+      "stroke-width": f2(7 * (pose.expression === "angry" ? 1.25 : 1))
+    });
+  } else if (who.trait === "dot") {
+    const s = clamp(-hair, 0, 1.2);
+    const th = Math.min(1, s / 0.35) * 61.05 * RAD;
+    const travel = Math.max(0, s - 0.35) / 0.65 * 92;
+    const p = seat(sh.crown, 12.5, 26.1 * th + travel);
+    let cy = p.y;
+    if (hair > 0)
+      cy -= hair * 18;
+    cy += lag * (s > 0.35 ? 0.3 : 1);
+    traitT = `translate(${f2(p.x)} ${f2(cy)}) scale(${f2(1 + Math.max(0, hair) * 0.1)})`;
+    shape = n("circle", "trait.shape", { cx: 0, cy: 0, r: 12.5, fill: deep });
+  } else {
+    const s = seat(sh.crown, 4 + Math.max(0, hair) * 9, 0);
+    const r = s.a + (hair < 0 ? -hair * 38 : 0) - lag * 0.5;
+    traitT = `translate(${f2(s.x)} ${f2(s.y + lag)}) rotate(${f2(r)}) scale(${f2(1 + Math.max(0, hair) * 0.1)})`;
+    shape = n("path", "trait.shape", {
+      d: "M0 -27L13 -3L-13 -3Z",
+      fill: deep,
+      stroke: deep,
+      "stroke-width": 6,
+      "stroke-linejoin": "round"
+    });
+  }
+  const trait = n("g", "trait", { transform: traitT }, [shape]);
+  const off = (dx, dy) => riso ? `translate(${f2(dx * k * upp)} ${f2(dy * k * upp)})` : undefined;
+  const av = n("g", "av", {
+    transform: `translate(${f2(x)} ${f2(ty)}) rotate(${f2(rot)} 170 ${B}) translate(170 ${B}) scale(${sc(sx)} ${sc(sy)}) translate(-170 ${-B})`,
+    filter: dim > 0.01 ? `url(#${id}-dim)` : undefined
+  }, [
+    n("g", "plateA", {
+      transform: off(-0.55, 0.45),
+      filter: riso ? `url(#${id}-pA)` : undefined
+    }, [bodyNode, ...cheeks, trait]),
+    n("g", "plateB", {
+      transform: off(0.6, -0.5),
+      filter: riso ? `url(#${id}-pB)` : undefined
+    }, [...eyes, ...brows, mouth])
+  ]);
+  const scene = [];
+  if (o.frame !== "none") {
+    const bg = o.frame === "ink" ? INK.ink : o.frame === "bone" ? INK.bone : INK.paper;
+    scene.push(n("rect", "bg", { ...VBr, fill: bg }));
+    const th = clamp(g("thing"), 0, 1);
+    const dots = [];
+    for (let j = 0;j < 3; j++)
+      for (let i = 0;i < 3; i++) {
+        const q = j * 3 + i;
+        const kk = smooth(q / 12, q / 12 + 0.35, th);
+        dots.push(n("circle", `lattice.${q}`, {
+          cx: 312 + i * 18,
+          cy: 2 + j * 18,
+          r: f2(1.2 + 2.2 * kk),
+          opacity: f3(kk * 0.55)
+        }));
+      }
+    scene.push(n("g", "lattice", { fill: o.frame === "ink" ? INK.bone : INK.ink }, dots));
+  }
+  scene.push(av);
+  if (grainy)
+    scene.push(n("rect", "grain", {
+      ...VBr,
+      filter: `url(#${id}-grain)`,
+      opacity: o.frame === "ink" ? 0.3 : 0.16,
+      "pointer-events": "none"
+    }));
+  const root = n("svg", "root", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: VB.join(" "),
+    width: o.size,
+    height: o.size,
+    role: o.title === false ? undefined : "img",
+    "aria-label": o.title === false ? undefined : o.title,
+    "aria-hidden": o.title === false ? "true" : undefined
+  }, [
+    n("defs", "defs", {}, defs),
+    n("g", "frame", { "clip-path": `url(#${id}-f)` }, scene)
+  ]);
+  return o.live ? root : prune(root) ?? root;
+}
+
+// src/animate.ts
+var GROUP_OF = {};
+for (const gr of Object.keys(GROUPS))
+  for (const c of GROUPS[gr])
+    GROUP_OF[c] = gr;
+var CHANNELS = Object.keys(GROUP_OF);
+var DEF_DELAY = {
+  eyes: 0,
+  pupil: 50,
+  brows: 110,
+  mouth: 170,
+  extra: 140,
+  body: 230
+};
+var DEF_SPR = {
+  eyes: [14, 0.82],
+  pupil: [15, 0.8],
+  brows: [11, 0.72],
+  mouth: [12, 0.74],
+  body: [7, 0.72],
+  extra: [8, 0.5]
+};
+var CHOREO = {
+  happy: {
+    delay: {
+      eyes: 0,
+      pupil: 40,
+      brows: 120,
+      mouth: 200,
+      extra: 220,
+      body: 280
+    },
+    spr: { body: [9, 0.42], extra: [9, 0.35] },
+    keys: [
+      [280, { alt: 0.2 }, { body: [11, 0.5] }],
+      [520, { alt: 0.05 }, { body: [8, 0.38] }]
+    ]
+  },
+  sad: {
+    delay: {
+      eyes: 0,
+      pupil: 160,
+      brows: 260,
+      mouth: 380,
+      extra: 420,
+      body: 560
+    },
+    spr: {
+      eyes: [6, 0.95],
+      pupil: [5, 0.95],
+      brows: [6, 0.95],
+      mouth: [6, 0.9],
+      body: [3.2, 0.95],
+      extra: [3, 0.9]
+    }
+  },
+  angry: {
+    delay: { brows: 0, eyes: 40, pupil: 60, mouth: 160, body: 100, extra: 60 },
+    spr: { brows: [18, 0.7], eyes: [16, 0.75], body: [14, 0.5] }
+  },
+  sleepy: {
+    delay: {
+      eyes: 0,
+      pupil: 200,
+      brows: 750,
+      mouth: 950,
+      extra: 900,
+      body: 1150
+    },
+    spr: {
+      eyes: [2.6, 1],
+      pupil: [3, 1],
+      brows: [3.2, 1],
+      mouth: [3, 1],
+      extra: [2.4, 0.9],
+      body: [1.9, 1]
+    },
+    keys: [
+      [0, { lid: 0.62 }],
+      [1300, { lid: 1 }]
+    ]
+  },
+  curious: {
+    delay: { eyes: 0, pupil: 0, brows: 220, mouth: 320, extra: 0, body: 0 },
+    spr: { body: [6, 0.95] },
+    keys: [
+      [0, { alt: -0.8, rot: 0, gx: 0, gy: -0.1, thing: 0 }],
+      [900, { alt: -0.56 }, { body: [2.2, 1] }],
+      [1500, { thing: 1 }, { extra: [5, 0.9] }],
+      [2200, { look: 1 }, { pupil: [6, 0.9] }],
+      [2500, { rot: 7 }, { body: [3, 0.9] }],
+      [2900, { alt: -0.32 }, { body: [2, 1] }]
+    ]
+  },
+  surprised: {
+    delay: { eyes: 0, pupil: 0, brows: 0, mouth: 40, extra: 60, body: 0 },
+    spr: {
+      eyes: [30, 0.62],
+      pupil: [26, 0.7],
+      brows: [24, 0.55],
+      mouth: [22, 0.6],
+      extra: [15, 0.32]
+    },
+    keys: [
+      [0, { alt: (v) => v - 0.1, sy: 0.9, sx: 1.05 }, { body: [30, 1] }],
+      [110, { alt: 0.36, sy: 1.08, sx: 0.97 }, { body: [17, 0.42] }],
+      [380, { sy: 1, sx: 1 }, { body: [10, 0.5] }]
+    ]
+  },
+  excited: {
+    delay: { eyes: 0, pupil: 30, brows: 80, mouth: 140, extra: 120, body: 180 },
+    spr: { body: [9, 0.4], extra: [12, 0.3] }
+  },
+  confused: {
+    delay: {
+      eyes: 0,
+      brows: 60,
+      pupil: 100,
+      mouth: 250,
+      body: 200,
+      extra: 200
+    },
+    spr: { body: [5, 0.7] }
+  },
+  bored: {
+    delay: {
+      eyes: 0,
+      pupil: 300,
+      brows: 500,
+      mouth: 600,
+      extra: 700,
+      body: 800
+    },
+    spr: {
+      eyes: [3, 1],
+      pupil: [2.5, 1],
+      brows: [3, 1],
+      mouth: [3, 1],
+      body: [1.6, 1],
+      extra: [2, 1]
+    }
+  },
+  attentive: {
+    delay: {
+      eyes: 0,
+      pupil: 180,
+      brows: 90,
+      mouth: 240,
+      extra: 200,
+      body: 360
+    },
+    spr: {
+      eyes: [20, 0.8],
+      pupil: [20, 0.85],
+      brows: [16, 0.7],
+      body: [5, 0.78],
+      extra: [11, 0.4]
+    }
+  }
+};
+var ATTENTION = {
+  normal: 0.8,
+  happy: 0.6,
+  sad: 0.2,
+  angry: 0.6,
+  sleepy: 0,
+  curious: 1,
+  surprised: 0.5,
+  excited: 0.5,
+  confused: 0.3,
+  bored: 0.1,
+  attentive: 1
+};
+var BLINK = {
+  normal: [2.4, 5],
+  happy: [2.2, 4],
+  sad: [3, 6],
+  angry: [3.5, 6],
+  sleepy: null,
+  curious: [3.5, 6],
+  surprised: [3, 5],
+  excited: [1.8, 3.2],
+  confused: [2, 4],
+  bored: [4.5, 7.5],
+  attentive: [4.5, 7.5]
+};
+var rand = (a, b) => a + Math.random() * (b - a);
+var zero = () => {
+  const o = {};
+  for (const c of CHANNELS)
+    o[c] = 0;
+  return o;
+};
+var ALL = new Set;
+var LIVE = new Set;
+var raf = 0;
+var last = 0;
+function tick(now) {
+  const dt = Math.min(0.05, (now - last) / 1000);
+  last = now;
+  if (!document.hidden) {
+    for (const l of LIVE)
+      if (l.visible)
+        l.measure();
+    for (const l of LIVE)
+      if (l.visible)
+        l.step(dt);
+  }
+  raf = LIVE.size ? requestAnimationFrame(tick) : 0;
+}
+function run() {
+  if (raf)
+    return;
+  last = performance.now();
+  raf = requestAnimationFrame(tick);
+}
+var motionQuery = null;
+function reducedMotion() {
+  if (!motionQuery) {
+    motionQuery = matchMedia("(prefers-reduced-motion: reduce)");
+    motionQuery.addEventListener("change", (e) => {
+      for (const l of ALL)
+        l.setReduced(e.matches);
+    });
+  }
+  return motionQuery.matches;
+}
+var pointer = null;
+var listening = false;
+function listen() {
+  if (listening)
+    return;
+  listening = true;
+  const at = (e) => {
+    pointer = [e.clientX, e.clientY];
+  };
+  document.addEventListener("pointermove", at, { passive: true });
+  document.addEventListener("pointerdown", at, { passive: true });
+  document.documentElement.addEventListener("pointerleave", () => {
+    pointer = null;
+  });
+}
+
+class Live {
+  svg;
+  who;
+  opts;
+  visible = true;
+  state;
+  reduced;
+  nodes = new Map;
+  prev = new Map;
+  io = null;
+  clock = 0;
+  enteredAt = 0;
+  val;
+  vel = zero();
+  base;
+  spr = {};
+  out = zero();
+  queue = [];
+  bumps = [];
+  blinkAt = rand(1, 3);
+  blinkT = -1;
+  blinkDur = 0.16;
+  blinkV = 0;
+  doubleBlink = false;
+  saccAt = rand(0.6, 1.8);
+  sacc = { gx: 0, gy: 0 };
+  nodAt = 0;
+  lookThing;
+  lag = { y: 0, v: 0 };
+  fixed = null;
+  watch = false;
+  rect = null;
+  constructor(svg, tree, who, opts, expression, gaze) {
+    this.svg = svg;
+    this.who = who;
+    this.opts = opts;
+    this.state = expression;
+    this.bind(tree, svg);
+    this.setGaze(gaze);
+    const start = restPose(who, expression, this.fixed ?? undefined);
+    this.val = { ...start };
+    this.base = { ...EXPRESSIONS[expression] };
+    if (this.fixed)
+      [this.base.gx, this.base.gy] = this.fixed;
+    for (const c of CHANNELS)
+      this.spr[c] = DEF_SPR[GROUP_OF[c]];
+    this.lookThing = expression === "curious";
+    this.lag.y = -start.alt * frameOf(FACES[who.face]).R;
+    this.reduced = reducedMotion();
+    this.paint();
+    this.io = new IntersectionObserver((es) => {
+      for (const e of es)
+        this.visible = e.isIntersecting;
+    });
+    this.io.observe(svg);
+    ALL.add(this);
+    if (this.reduced)
+      return;
+    LIVE.add(this);
+    run();
+  }
+  destroy() {
+    ALL.delete(this);
+    LIVE.delete(this);
+    this.io?.disconnect();
+  }
+  setReduced(reduced) {
+    if (reduced === this.reduced)
+      return;
+    this.reduced = reduced;
+    if (!reduced) {
+      LIVE.add(this);
+      run();
+      return;
+    }
+    LIVE.delete(this);
+    this.snap();
+  }
+  measure() {
+    this.rect = this.watch && pointer ? this.svg.getBoundingClientRect() : null;
+  }
+  bind(node, el) {
+    this.nodes.set(node.key, el);
+    const now = {};
+    for (const a of Array.from(el.attributes))
+      if (a.name !== "class" && a.name !== "style")
+        now[a.name] = a.value;
+    this.prev.set(node.key, now);
+    node.children.forEach((c, i) => {
+      const child = el.children[i];
+      if (child)
+        this.bind(c, child);
+    });
+  }
+  write(node) {
+    const el = this.nodes.get(node.key);
+    const prev = this.prev.get(node.key) ?? {};
+    if (el) {
+      for (const k in node.attrs)
+        if (prev[k] !== node.attrs[k])
+          el.setAttribute(k, node.attrs[k]);
+      for (const k in prev)
+        if (!(k in node.attrs))
+          el.removeAttribute(k);
+    }
+    this.prev.set(node.key, node.attrs);
+    for (const c of node.children)
+      this.write(c);
+  }
+  setGaze(gaze) {
+    this.fixed = Array.isArray(gaze) ? gaze : null;
+    this.watch = gaze === "pointer";
+    if (this.watch)
+      listen();
+    if (this.reduced && this.fixed) {
+      [this.val.gx, this.val.gy] = this.fixed;
+      this.paint();
+    }
+  }
+  setExpression(name) {
+    if (name === this.state)
+      return;
+    const prev = this.state;
+    this.state = name;
+    this.enteredAt = this.clock;
+    this.lookThing = false;
+    this.queue = [];
+    const tgt = EXPRESSIONS[name];
+    const ch = CHOREO[name] ?? {};
+    const delay = { ...DEF_DELAY, ...ch.delay };
+    const spr = { ...DEF_SPR, ...ch.spr };
+    if (this.reduced) {
+      this.snap();
+      return;
+    }
+    for (const gr of Object.keys(GROUPS)) {
+      const set = {};
+      for (const c of GROUPS[gr])
+        set[c] = tgt[c];
+      this.queue.push({
+        at: this.clock + delay[gr] / 1000,
+        set,
+        spr: { [gr]: spr[gr] }
+      });
+    }
+    for (const [t, set, s] of ch.keys ?? [])
+      this.queue.push({ at: this.clock + t / 1000 + 0.0001, set, spr: s });
+    this.queue.sort((a, b) => a.at - b.at);
+    if (name === "surprised") {
+      this.blinkAt = this.clock + 0.75;
+      this.doubleBlink = true;
+    }
+    if (name === "sleepy")
+      this.nodAt = this.clock + rand(6, 8);
+    if (prev === "sleepy")
+      this.bumps = [];
+  }
+  snap() {
+    const rest = restPose(this.who, this.state, this.fixed ?? undefined);
+    for (const c of CHANNELS) {
+      this.base[c] = EXPRESSIONS[this.state][c];
+      this.val[c] = rest[c];
+      this.vel[c] = 0;
+    }
+    this.lookThing = this.state === "curious";
+    this.queue = [];
+    this.bumps = [];
+    this.blinkT = -1;
+    this.blinkV = 0;
+    this.out = zero();
+    this.paint();
+  }
+  bump(ch, amt, a, h, r) {
+    this.bumps.push({ ch, amt, t0: this.clock, a, h, r });
+  }
+  step(dt) {
+    this.clock += dt;
+    const t = this.clock;
+    const age = t - this.enteredAt;
+    const st = this.state;
+    const face = FACES[this.who.face];
+    while (this.queue.length && this.queue[0].at <= t) {
+      const q = this.queue.shift();
+      if (q.spr)
+        for (const gr of Object.keys(q.spr)) {
+          const s = q.spr[gr];
+          if (s)
+            for (const c of GROUPS[gr])
+              this.spr[c] = s;
+        }
+      for (const c of Object.keys(q.set)) {
+        if (c === "look") {
+          this.lookThing = true;
+          continue;
+        }
+        const v = q.set[c];
+        this.base[c] = typeof v === "function" ? v(this.val[c]) : v;
+      }
+    }
+    const tgt = zero();
+    const out = zero();
+    let gx = this.base.gx;
+    let gy = this.base.gy;
+    if (this.lookThing)
+      [gx, gy] = thingGaze(face, this.val.x, this.val.alt);
+    if (this.fixed)
+      [gx, gy] = this.fixed;
+    const still = st === "sleepy" || st === "bored";
+    if (!still && t >= this.saccAt) {
+      this.sacc = { gx: rand(-0.17, 0.17), gy: rand(-0.1, 0.1) };
+      this.saccAt = t + rand(0.8, 2.6);
+    }
+    if (!still) {
+      gx += this.sacc.gx;
+      gy += this.sacc.gy;
+    }
+    const w = ATTENTION[st];
+    const r = this.rect;
+    if (pointer && r && w > 0) {
+      if (r.width > 0) {
+        const fx = VB[0] + (pointer[0] - r.left) / r.width * VB[2];
+        const fy = VB[1] + (pointer[1] - r.top) / r.height * VB[3];
+        const { baseY, eyeY, R: R2 } = frameOf(face);
+        const ex = 170 + this.val.x;
+        const ey = eyeY + baseY - this.val.alt * R2;
+        const px = clamp((fx - ex) / 170, -1, 1);
+        const py = clamp((fy - ey) / 170, -1, 1);
+        gx += (px - gx) * w;
+        gy += (py - gy) * w;
+      }
+    }
+    tgt.gx = gx - this.base.gx;
+    tgt.gy = gy - this.base.gy;
+    const br = st === "sleepy" ? 1.3 : st === "bored" ? 1.2 : st === "attentive" ? 2.6 : 2.1;
+    const ba = st === "sleepy" ? 0.018 : st === "attentive" ? 0.004 : 0.007;
+    out.sy += ba * Math.sin(t * br);
+    out.alt += (st === "sleepy" ? 0.03 : 0.008) * Math.sin(t * br + 1.1);
+    if (st === "happy")
+      out.rot += 1.4 * Math.sin(t * 1.7);
+    if (st === "angry") {
+      out.x += 7 * Math.sin(age * 42) * Math.exp(-age * 6);
+      out.x += 0.35 * Math.sin(t * 31);
+    }
+    if (st === "excited") {
+      const ph = age % 1.5;
+      if (ph < 0.9) {
+        const h2 = Math.max(0, Math.sin(ph / 0.45 * Math.PI));
+        out.alt += h2 * 0.17;
+        out.sy += h2 * 0.045;
+        out.rot += 2 * Math.sin(t * 9) * h2;
+      }
+    }
+    if (st === "confused") {
+      tgt.gx += 0.45 * Math.sin(age * 1.1);
+      out.rot += 2.2 * Math.sin(age * 0.7);
+    }
+    if (st === "bored")
+      tgt.gx += 0.22 * Math.sin(t * 0.33);
+    if (st === "sleepy" && t >= this.nodAt && age > 3) {
+      this.bump("alt", 0.3, 0.14, 0.5, 1.6);
+      this.bump("lid", -0.5, 0.14, 0.45, 1.3);
+      this.bump("hair", 0.6, 0.12, 0.4, 1.2);
+      this.nodAt = t + rand(6.5, 9.5);
+    }
+    if ((st === "sad" || st === "bored") && Math.random() < dt / 7) {
+      this.bump("sy", -0.035, 0.5, 0.25, 0.9);
+      this.bump("alt", -0.05, 0.5, 0.25, 0.9);
+    }
+    const h = dt / 2;
+    for (const c of CHANNELS) {
+      const [om, ze] = this.spr[c];
+      const target = this.base[c] + tgt[c];
+      let x = this.val[c];
+      let v = this.vel[c];
+      for (let i = 0;i < 2; i++) {
+        v += (om * om * (target - x) - 2 * ze * om * v) * h;
+        x += v * h;
+      }
+      this.val[c] = x;
+      this.vel[c] = v;
+    }
+    this.bumps = this.bumps.filter((b) => {
+      const u = t - b.t0;
+      if (u > b.a + b.h + b.r)
+        return false;
+      const e = u < b.a ? smooth(0, 1, u / b.a) : u < b.a + b.h ? 1 : 1 - smooth(0, 1, (u - b.a - b.h) / b.r);
+      out[b.ch] += b.amt * e;
+      return true;
+    });
+    const bl = BLINK[st];
+    let blink = 0;
+    if (bl && this.val.lid < 0.75) {
+      if (this.blinkT < 0 && t >= this.blinkAt) {
+        this.blinkT = 0;
+        this.blinkDur = st === "bored" ? 0.42 : 0.16;
+      }
+      if (this.blinkT >= 0) {
+        this.blinkT += dt;
+        const u = this.blinkT / this.blinkDur;
+        if (u >= 1) {
+          this.blinkT = -1;
+          if (this.doubleBlink) {
+            this.doubleBlink = false;
+            this.blinkAt = t + 0.09;
+          } else {
+            const k = this.who.persona.blink;
+            this.blinkAt = t + rand(bl[0] * k, bl[1] * k);
+          }
+        } else
+          blink = Math.sin(u * Math.PI);
+      }
+    } else if (!bl)
+      this.blinkT = -1;
+    this.blinkV = blink;
+    const R = frameOf(face).R;
+    const avY = -(this.val.alt + out.alt) * R;
+    const lom = 10;
+    const lze = 0.32;
+    this.lag.v += (lom * lom * (avY - this.lag.y) - 2 * lze * lom * this.lag.v) * dt;
+    this.lag.y += this.lag.v * dt;
+    this.out = out;
+    this.paint();
+  }
+  paint() {
+    const R = frameOf(FACES[this.who.face]).R;
+    const pose = { blink: this.blinkV, expression: this.state };
+    for (const c of CHANNELS)
+      pose[c] = this.val[c] + this.out[c];
+    pose.lag = this.reduced ? 0 : clamp((this.lag.y + pose.alt * R) * 0.4, -16, 16);
+    this.write(draw(this.who, pose, this.opts));
+  }
+}
+
+// src/svg.ts
+function settle(name, o, live = false) {
+  const base = identify(name, { version: o.version });
+  const who = {
+    ...base,
+    face: o.face ?? base.face,
+    color: o.color ?? base.color,
+    eyes: o.eyes ?? base.eyes,
+    brows: o.brows ?? base.brows,
+    mouth: o.mouth ?? base.mouth,
+    cheeks: o.cheeks ?? base.cheeks,
+    trait: o.trait ?? base.trait
+  };
+  const pose = restPose(who, o.expression ?? "normal", o.gaze);
+  const look = {
+    size: o.size ?? 64,
+    frame: o.frame ?? "ink",
+    square: o.square ?? true,
+    riso: o.riso ?? false,
+    live
+  };
+  const id = o.id ?? `peek-${fnv1a(JSON.stringify([who, pose, look])).toString(36)}`;
+  return { who, pose, opts: { ...look, id, title: o.title ?? name } };
+}
+var ILLEGAL = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+var esc = (s) => s.replace(ILLEGAL, "�").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function serialize(node) {
+  let a = "";
+  for (const k in node.attrs)
+    a += ` ${k}="${esc(node.attrs[k])}"`;
+  if (!node.children.length)
+    return `<${node.tag}${a}/>`;
+  return `<${node.tag}${a}>${node.children.map(serialize).join("")}</${node.tag}>`;
+}
+function toSvg(name, props = {}) {
+  const { who, pose, opts } = settle(name, props);
+  return serialize(draw(who, pose, opts));
+}
+
+// src/peek.tsx
+var camel = (k) => k.startsWith("aria-") ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+function toReact(node, root) {
+  const props = { key: node.key, ...root };
+  for (const k in node.attrs)
+    props[camel(k)] = node.attrs[k];
+  return createElement(node.tag, props, ...node.children.map((c) => toReact(c)));
+}
+function Peek({
+  name,
+  gaze,
+  animate = false,
+  className,
+  style,
+  ...rest
+}) {
+  const id = `peek${useId().replace(/[^\w-]/g, "")}`;
+  const fixed = Array.isArray(gaze) ? gaze : undefined;
+  const { who, pose, opts } = settle(name, { ...rest, gaze: fixed, id }, animate);
+  const svg = useRef(null);
+  const live = useRef(null);
+  const expression = rest.expression ?? "normal";
+  const [first] = useState(() => ({ expression, gaze: fixed }));
+  const sig = JSON.stringify([who, opts]);
+  const tree = draw(who, animate ? restPose(who, first.expression, first.gaze) : pose, opts);
+  const gazeKey = String(gaze ?? "");
+  useEffect(() => {
+    if (!animate || !svg.current)
+      return;
+    const l = new Live(svg.current, tree, who, opts, expression, gaze);
+    live.current = l;
+    return () => {
+      l.destroy();
+      live.current = null;
+    };
+  }, [animate, sig]);
+  useEffect(() => {
+    live.current?.setExpression(expression);
+  }, [expression]);
+  useEffect(() => {
+    live.current?.setGaze(gaze);
+  }, [gazeKey]);
+  return toReact(tree, { ref: svg, className, style });
+}
+export {
+  AXES,
+  COLORS,
+  EXPRESSIONS,
+  FACES,
+  GROUPS,
+  LATEST,
+  LISTS,
+  PARTS,
+  Peek,
+  VERSIONS,
+  identify,
+  tidy,
+  toSvg
+};