@doan-labs/peek 1.0.0 → 2.0.0

package/dist/vue.js

@@ -0,0 +1,2302 @@
+// src/vue.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useId,
+  watch
+} from "vue";
+
+// 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 VARIANTS = ["peek", "haze", "bloc"];
+var HAZE = {
+  lavender: { tint: "#C8B1F5", glow: "#F2EDFD" },
+  fog: { tint: "#9EC3F2", glow: "#E6F1FF" },
+  clay: { tint: "#F4AE93", glow: "#FEECE5" },
+  mint: { tint: "#A3DAB5", glow: "#E5F5EA" },
+  butter: { tint: "#E1CC7A", glow: "#F4F0E0" },
+  rose: { tint: "#F0A9C4", glow: "#FDEAF1" },
+  aqua: { tint: "#85D3DC", glow: "#E0F5F7" }
+};
+var WHEEL = [
+  "clay",
+  "butter",
+  "mint",
+  "aqua",
+  "fog",
+  "lavender",
+  "rose"
+];
+var BLOC = {
+  lavender: "#B093E5",
+  fog: "#7BA8DF",
+  clay: "#E38A66",
+  mint: "#82CB9B",
+  butter: "#E2CA6A",
+  rose: "#DF84A8",
+  aqua: "#5EC3CD"
+};
+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 ACCESSORY_INK = { knot: "#E5412D" };
+var ACCESSORIES = {
+  eyewear: ["none", "glasses", "sunglasses"],
+  headwear: ["none", "bow", "cap", "sprout"],
+  neckwear: ["none", "tie"]
+};
+var VERSIONS = {
+  1: {
+    face: 4,
+    color: 7,
+    eyes: 3,
+    brows: 4,
+    mouth: 4,
+    cheeks: 3,
+    trait: 5,
+    eyewear: 1,
+    headwear: 1,
+    neckwear: 1
+  }
+};
+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/bloc.ts
+var RAD = Math.PI / 180;
+var TRI = [
+  [170, 12.8],
+  [320, 312.8],
+  [20, 312.8]
+];
+var BODY = {
+  diamond: FACES.diamond,
+  semicircle: FACES.semicircle,
+  circle: FACES.circle,
+  triangle: {
+    body: { d: `M${TRI.map((p) => p.join(" ")).join("L")}Z` },
+    crown: { poly: TRI, r: 0 }
+  }
+};
+var strokeFor = (px) => px >= 96 ? 1 : px >= 56 ? 1.25 : px >= 40 ? 1.6 : px >= 30 ? 2 : 2.6;
+var boostFor = (px) => px < 30 ? 1.25 : px < 56 ? 1.12 : 1;
+var turn = (x, y, deg) => {
+  const c = Math.cos(deg * RAD);
+  const s = Math.sin(deg * RAD);
+  return [x * c - y * s, x * s + y * c];
+};
+var poly = (pts) => `M${pts.map(([x, y]) => `${f2(x)} ${f2(y)}`).join("L")}Z`;
+function blocParts({ who, pose, o, defs, g }) {
+  const sh = FACES[who.face];
+  const { body, crown } = BODY[who.face];
+  const id = o.id;
+  const P = who.persona;
+  const spread = P.spread;
+  const st = strokeFor(o.size);
+  const up = boostFor(o.size);
+  const strong = BLOC[who.color];
+  const light = o.frame === "bone" || o.frame === "paper" ? COLORS[who.color].deep : COLORS[who.color].body;
+  const lineW = sh.brow.w * st;
+  defs.push(n("clipPath", "half", { id: `${id}-r` }, [
+    n("rect", "half.shape", { x: 170, y: -30, width: 200, height: 400 })
+  ]));
+  const block = (key, fill, clip) => ("d" in body) ? n("path", key, { d: body.d, fill, "clip-path": clip }) : n("circle", key, {
+    cx: body.circle[0],
+    cy: body.circle[1],
+    r: body.circle[2],
+    fill,
+    "clip-path": clip
+  });
+  const eyeS = g("eyeS");
+  const r0 = Math.sqrt(sh.rx * sh.ry) * up;
+  const lid0 = g("lid");
+  const lidAsym = g("lidAsym");
+  const lower = clamp(g("lower"), 0, 1);
+  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 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) * pose.blink;
+    const cut = clamp((lid - 0.1) / 0.9, 0, 1);
+    const r = bead ? r0 * 0.7 * eyeS * (0.4 + 0.6 * pupil) : r0 * eyeS;
+    const [tx, ty] = bead ? [ex + side * spread + gx * 6, ey + gy * 6] : [ex + side * spread, ey];
+    const a = side * tilt;
+    const edge = -r - 1 + cut * (2 * r + 2);
+    const floor = r + 1 - lower * r * 2.2;
+    const W = r + 2;
+    const lidAt = (x) => x * Math.tan(a * RAD) + edge / Math.cos(a * RAD);
+    const [t0, t1] = [lidAt(-W), lidAt(W)];
+    defs.push(n("clipPath", `${kk}.clip`, { id: `${id}-e${i}` }, [
+      n("path", `${kk}.clip.shape`, {
+        d: poly([
+          [-W, t0],
+          [W, t1],
+          [W, Math.max(floor, t1)],
+          [-W, Math.max(floor, t0)]
+        ])
+      })
+    ]));
+    const pr = sh.pr * pupil * up;
+    const px = gx * Math.max(0, r - pr) * 0.85;
+    const py = gy * Math.max(0, r - pr) * 0.75;
+    const rim = Math.min(r * 0.27 * Math.min(st, 1.6), r * 0.4);
+    const inner = bead ? [n("circle", `${kk}.bead`, { cx: 0, cy: 0, r: f2(r), fill: INK.ink })] : [
+      n("circle", `${kk}.white`, {
+        cx: 0,
+        cy: 0,
+        r: f2(r),
+        fill: INK.paper
+      }),
+      n("circle", `${kk}.pupil`, {
+        cx: f2(px),
+        cy: f2(py),
+        r: f2(pr),
+        fill: INK.ink
+      })
+    ];
+    if (who.eyes === "ring")
+      inner.push(n("circle", `${kk}.rim`, {
+        cx: 0,
+        cy: 0,
+        r: f2(r - rim / 2),
+        fill: "none",
+        stroke: INK.ink,
+        "stroke-width": f2(rim)
+      }));
+    const co = smooth(0.86, 1, lid);
+    const yy = Math.min(edge, r) - lineW / 2;
+    return n("g", kk, { transform: `translate(${f2(tx)} ${f2(ty)})` }, [
+      n("g", `${kk}.inner`, { "clip-path": `url(#${id}-e${i})` }, inner),
+      n("path", `${kk}.closed`, {
+        d: `M${f2(-r * 0.95)} ${f2(yy)}H${f2(r * 0.95)}`,
+        transform: `rotate(${f2(a * 0.6)})`,
+        stroke: INK.ink,
+        "stroke-width": f2(lineW * 1.4),
+        opacity: co > 0.01 ? f2(co) : 0
+      })
+    ]);
+  });
+  const bt = pose.browTilt;
+  const basym = g("browAsym");
+  const th = lineW * 2 * g("browW");
+  const hw = sh.eyes[1][0] - 170 + spread + Math.sqrt(sh.rx * sh.ry) * P.mul.eyeS * up;
+  const gap = smooth(0, 8, Math.abs(bt)) * th * 0.9;
+  const slant = P.add.browTilt * 0.3 - Math.atan(1.3 * basym / (2 * hw)) / RAD;
+  const y0 = sh.brow.y + g("browY") - (eyeS - 1) * sh.ry * 0.9 - 0.35 * basym;
+  const halves = (dy, len2 = 1) => [-1, 1].map((s2) => {
+    const [ox, oy] = turn(s2 * gap / 2, 0, slant);
+    const x0 = 170 + ox;
+    const yy = y0 + dy + oy;
+    const ang = slant + s2 * bt;
+    const [ux, uy] = turn(s2 * (hw * len2 - gap / 2), 0, ang);
+    const [nx, ny] = turn(0, th / 2, ang);
+    return [
+      [x0 - nx, yy - ny],
+      [x0 + ux - nx, yy + uy - ny],
+      [x0 + ux + nx, yy + uy + ny],
+      [x0 + nx, yy + ny]
+    ];
+  });
+  const inside = (dy, len2 = 1) => halves(dy, len2).every((q) => q.every(([x, y]) => depth(crown, x, y) + 2 < 0));
+  let lo = 0;
+  let hi = 0;
+  if (!inside(0)) {
+    hi = 60;
+    for (let k = 0;k < 12; k++) {
+      const mid2 = (lo + hi) / 2;
+      if (inside(mid2))
+        hi = mid2;
+      else
+        lo = mid2;
+    }
+  }
+  let len = 1;
+  if (!inside(hi)) {
+    let short = 0;
+    for (let k = 0;k < 12; k++) {
+      const mid2 = (short + len) / 2;
+      if (inside(hi, mid2))
+        short = mid2;
+      else
+        len = mid2;
+    }
+    len = short;
+  }
+  const bars = halves(hi, len).map((q, i) => n("path", `bar${i}`, { d: poly(q), fill: INK.ink }));
+  const m = sh.mouth;
+  const big = (who.face === "diamond" || who.face === "triangle" ? 1.25 : 1) * up;
+  const mw = m.w * Math.max(0.05, g("mw")) * big;
+  const mt = g("mt") * m.d * big;
+  const mb = g("mb") * m.d * big;
+  const mid = (mt + mb) / 2;
+  const kb = 4 / 3;
+  let d;
+  if (who.mouth === "poly") {
+    const s2 = Math.max(mw * 0.9, (mb - mt) / 2);
+    d = poly([
+      [-s2, mid],
+      [0, mid - s2],
+      [s2, mid],
+      [0, mid + s2]
+    ]);
+  } else if (who.mouth === "box") {
+    const h = Math.max(mb - mt, lineW * 1.6) / 2;
+    const w = mw * 0.85;
+    d = poly([
+      [-w, mid - h],
+      [w, mid - h],
+      [w, mid + h],
+      [-w, mid + h]
+    ]);
+  } else if (who.mouth === "line") {
+    const h = lineW * 1.4 / 2;
+    const w = mw * 1.5;
+    const y = mid * 0.5;
+    d = poly([
+      [-w, y - h],
+      [w, y - h],
+      [w, y + h],
+      [-w, y + h]
+    ]);
+  } else {
+    d = `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 mouth = n("path", "mouth", {
+    d,
+    transform: `translate(${f2(m.x + g("mx"))} ${f2(m.y + g("my"))}) rotate(${f2(g("mk"))})`,
+    fill: INK.ink
+  });
+  const hair = g("hair");
+  const s = seat(crown, Math.max(0, hair) * 8, 110 + Math.max(0, -hair) * 40);
+  const shape = who.trait === "square" ? n("rect", "trait.shape", { x: -21, y: -21, width: 42, height: 42 }) : who.trait === "dot" ? n("circle", "trait.shape", { cx: 0, cy: 0, r: 22 }) : who.trait === "ring" ? n("circle", "trait.shape", {
+    cx: 0,
+    cy: 0,
+    r: 17.5,
+    fill: "none",
+    stroke: strong,
+    "stroke-width": 13
+  }) : who.trait === "fin" ? n("path", "trait.shape", { d: "M-27 27V-27A54 54 0 0 1 27 27Z" }) : n("rect", "trait.shape", {
+    x: -16,
+    y: -30,
+    width: 32,
+    height: 60
+  });
+  const trait = n("g", "trait", {
+    transform: `translate(${f2(s.x)} ${f2(s.y + pose.lag)}) scale(${f2(up)})`,
+    fill: strong
+  }, [shape]);
+  return [
+    [block("body", strong), block("body.light", light, `url(#${id}-r)`), trait],
+    [...eyes, ...bars, mouth]
+  ];
+}
+
+// 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,
+  ...ACCESSORIES
+};
+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"),
+    eyewear: pick("eyewear"),
+    headwear: pick("headwear"),
+    neckwear: pick("neckwear"),
+    persona
+  };
+}
+
+// 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 strokeFor2 = (px) => px >= 96 ? 1 : px >= 56 ? 1.25 : px >= 40 ? 1.6 : px >= 30 ? 2 : 2.4;
+var RAD2 = Math.PI / 180;
+var STEM = "M0 0Q3 -19 0 -36";
+var LEAF0 = "M0 -33C-24 -30 -38 -52 -25 -53C-12 -54 -2 -43 0 -33Z";
+var LEAF1 = "M0 -33C5 -54 28 -61 27 -48C26 -36 11 -31 0 -33Z";
+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 / RAD2
+  });
+  const P = crown.poly;
+  if (P.length === 1)
+    return at(P[0], R ? u / R : 0);
+  const n2 = P.length;
+  const dir = u >= 0 ? 1 : -1;
+  let left = Math.abs(u);
+  let i = 0;
+  let b = 0;
+  for (let step = 0;step < n2; step++) {
+    const j = (i + dir + n2) % n2;
+    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 / RAD2
+      };
+    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 * RAD2;
+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 P = who.persona;
+  const mul = P.mul;
+  const add = P.add;
+  const g = (c) => pose[c] * (mul[c] ?? 1) + (add[c] ?? 0);
+  const id = o.id;
+  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 [front, back] = (o.variant === "bloc" ? blocParts : peekParts)({
+    who,
+    pose,
+    o,
+    defs,
+    g
+  });
+  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
+    }, front),
+    n("g", "plateB", {
+      transform: off(0.6, -0.5),
+      filter: riso ? `url(#${id}-pB)` : undefined
+    }, back)
+  ]);
+  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;
+}
+var HAZE_LEVEL = {
+  medium: {
+    deep: [0.502, 0.224],
+    glow: [0.749, 0.337],
+    tint: [0.4, 0.5],
+    tintStops: [
+      [0, 0.878],
+      [0.15, 0.878],
+      [0.618, 0.396]
+    ]
+  },
+  light: {
+    deep: [0.298, 0.133],
+    glow: [0.549, 0.247],
+    tint: [0.31, 0.387],
+    tintStops: [
+      [0, 0.549],
+      [0.55, 0.247]
+    ]
+  }
+};
+function hazePaint(who, o) {
+  const sh = FACES[who.face];
+  const id = o.id;
+  const L = HAZE_LEVEL[o.size < 32 ? "light" : "medium"];
+  const xs = sh.crown.poly.map((p) => p[0]);
+  const ys = sh.crown.poly.map((p) => p[1]);
+  const x0 = Math.min(...xs) - sh.crown.r;
+  const y0 = Math.min(...ys) - sh.crown.r;
+  const W = Math.max(...xs) + sh.crown.r - x0;
+  const H = sh.bottom - y0;
+  const rnd = mulberry32(fnv1a(`haze:${who.key ?? ""}`));
+  const warm = rnd() < 0.5;
+  const left = rnd() < 0.5;
+  const t = rnd();
+  const tintX = 0.04 + 0.174 * t;
+  const tintY = 0.649 + 0.202 * t;
+  const glowX = 0.38 - 0.12 * rnd();
+  const glowY = 0.12 + 0.099 * rnd();
+  const deepX = 0.251 - 0.151 * rnd();
+  const tintA = 90 - 180 * rnd();
+  const at = (inset, onLeft) => x0 + W * (onLeft ? inset : 1 - inset);
+  const i = WHEEL.indexOf(who.color);
+  const near = WHEEL[(i + (warm ? WHEEL.length - 1 : 1)) % WHEEL.length];
+  const { body, deep } = COLORS[who.color];
+  const blob = (k, color, [cx, cy, a, rx, ry], stops) => n("radialGradient", `haze.${k}`, {
+    id: `${id}-h${k[0]}`,
+    gradientUnits: "userSpaceOnUse",
+    cx: 0,
+    cy: 0,
+    r: 1,
+    gradientTransform: `translate(${f2(cx)} ${f2(cy)}) rotate(${f2(a)}) scale(${f2(rx)} ${f2(ry)})`
+  }, [...stops, [1, 0]].map(([at2, op], j) => n("stop", `haze.${k}.${j}`, {
+    offset: at2,
+    "stop-color": color,
+    "stop-opacity": op
+  })));
+  const fade = ([a, b]) => [
+    [0, a],
+    [0.55, b]
+  ];
+  const blobs = [
+    blob("deep", deep, [at(deepX, !left), y0 + H * 0.95, 0, W * 0.5, W * 0.35], fade(L.deep)),
+    blob("tint", HAZE[near].tint, [at(tintX, left), y0 + H * tintY, tintA, W * L.tint[0], W * L.tint[1]], L.tintStops),
+    blob("glow", HAZE[who.color].glow, [at(glowX, !left), y0 + H * glowY, 0, W * 0.475, W * 0.356], fade(L.glow))
+  ];
+  const shape = (key, paint) => ("d" in sh.body) ? n("path", key, {
+    d: sh.body.d,
+    fill: paint,
+    stroke: sh.body.stroke ? paint : undefined,
+    "stroke-width": sh.body.stroke,
+    "stroke-linejoin": sh.body.stroke ? "round" : undefined
+  }) : n("circle", key, {
+    cx: sh.body.circle[0],
+    cy: sh.body.circle[1],
+    r: sh.body.circle[2],
+    fill: paint
+  });
+  return [
+    ...blobs,
+    n("g", "haze", { id: `${id}-hz` }, [
+      shape("haze.body", body),
+      ...["deep", "tint", "glow"].map((k) => shape(`haze.${k}.fill`, `url(#${id}-h${k[0]})`))
+    ])
+  ];
+}
+function peekParts({ who, pose, o, defs, g }) {
+  const sh = FACES[who.face];
+  const { body: fill, deep } = COLORS[who.color];
+  const P = who.persona;
+  const spread = P.spread;
+  const id = o.id;
+  const st = strokeFor2(o.size);
+  const haze = o.variant === "haze";
+  if (haze)
+    defs.push(...hazePaint(who, o));
+  const bodyNode = haze ? n("use", "body", { href: `#${id}-hz` }) : ("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 [etx, ety] = bead ? [ex + side * spread + gx * 6, ey + gy * 6] : [ex + side * spread, ey];
+    const lids = [
+      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 (haze)
+      defs.push(n("clipPath", `${kk}.lidshape`, { id: `${id}-s${i}` }, lids));
+    const parts = [
+      n("g", `${kk}.inner`, { "clip-path": `url(#${id}-e${i})` }, inner),
+      n("g", `${kk}.lids`, { "clip-path": `url(#${id}-l${i})` }, haze ? [
+        n("g", `${kk}.lidpaint`, { "clip-path": `url(#${id}-s${i})` }, [
+          n("use", `${kk}.lidbody`, {
+            href: `#${id}-hz`,
+            transform: `translate(${f2(-etx)} ${f2(-ety)})`
+          })
+        ])
+      ] : lids)
+    ];
+    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: `translate(${f2(etx)} ${f2(ety)})` }, 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 [w2, 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 * RAD2);
+    const sin = Math.sin(side * btilt * RAD2);
+    const inside = (dy) => {
+      for (let t = 0;t <= 1; t += 0.25) {
+        const lx = w2 * (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 k = 0;k < 12; k++) {
+        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(-w2)} 0Q0 ${f2(ca)} ${f2(w2)} 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 * RAD2);
+    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 w2 = ringWalk(sh);
+    const s = seat(sh.crown, 8, Math.max(w2.min, w2.rest + 158 * (b - 35) * RAD2));
+    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 * RAD2;
+    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 wardrobe = [];
+  const w = (px) => f2(px * Math.min(st, 1.6));
+  const line = {
+    fill: "none",
+    stroke: INK.ink,
+    "stroke-width": w(5.25),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  if (who.eyewear !== "none") {
+    const lx = sh.eyes[0][0] - spread;
+    const rr = sh.eyes[1][0] + spread;
+    const ey = sh.eyes[0][1];
+    const gap = rr - lx;
+    const erx = Math.min(rx + 9, (gap - 15) / 2);
+    const ery = ry + 9;
+    const glasses = who.eyewear === "glasses";
+    const lensX = glasses ? erx : Math.min(rx + 11, (gap - 12) / 2);
+    const top = glasses ? ey - 4 : ey - ry - 2;
+    const frames = [
+      n("path", "eyewear.bridge", {
+        ...line,
+        d: `M${f2(lx + lensX)} ${f2(top)}Q${f2((lx + rr) / 2)} ${f2(top - (glasses ? 13 : 0))} ${f2(rr - lensX)} ${f2(top)}`
+      })
+    ];
+    for (const [i, cx] of [lx, rr].entries()) {
+      const key = `eyewear.lens${i}`;
+      frames.push(n("path", `${key}.arm`, {
+        ...line,
+        d: i === 0 ? `M${f2(cx - lensX - 9)} ${f2(top + 2)}L${f2(cx - lensX)} ${f2(top)}` : `M${f2(cx + lensX)} ${f2(top)}L${f2(cx + lensX + 9)} ${f2(top + 2)}`
+      }));
+      if (glasses) {
+        frames.push(n("ellipse", key, {
+          ...line,
+          cx: f2(cx),
+          cy: ey,
+          rx: f2(erx),
+          ry: f2(ery)
+        }));
+        frames.push(n("path", `${key}.glint`, {
+          ...line,
+          stroke: INK.paper,
+          "stroke-width": w(3),
+          d: `M${f2(cx - erx * 0.65)} ${f2(ey - ery * 0.45)}Q${f2(cx - erx * 0.5)} ${f2(ey - ery * 0.8)} ${f2(cx - erx * 0.2)} ${f2(ey - ery * 0.86)}`
+        }));
+      } else {
+        const h = ry * 2 + 9;
+        frames.push(n("path", key, {
+          d: `M${f2(cx - lensX)} ${f2(top)}H${f2(cx + lensX)}V${f2(top + h * 0.55)}Q${f2(cx + lensX)} ${f2(top + h)} ${f2(cx)} ${f2(top + h)}Q${f2(cx - lensX)} ${f2(top + h)} ${f2(cx - lensX)} ${f2(top + h * 0.55)}Z`,
+          fill: INK.ink,
+          stroke: INK.ink,
+          "stroke-width": w(3),
+          "stroke-linejoin": "round"
+        }));
+        frames.push(n("path", `${key}.glint`, {
+          ...line,
+          stroke: INK.paper,
+          "stroke-width": w(4),
+          d: `M${f2(cx - lensX * 0.58)} ${f2(top + 19)}l8 -8m-1 15 6 -6`
+        }), n("circle", `${key}.pin`, {
+          cx: f2(cx + lensX * 0.55),
+          cy: f2(top + h - 9),
+          r: 1.7,
+          fill: INK.paper
+        }));
+      }
+    }
+    wardrobe.push(n("g", "eyewear", {}, frames));
+  }
+  if (who.headwear !== "none") {
+    const side = who.trait === "ring" || who.trait === "dot" ? -1 : 1;
+    const cap = who.headwear === "cap";
+    const sprout = who.headwear === "sprout";
+    const inset = sprout ? -6 : cap ? -8 : 0;
+    const offset = sprout ? 34 : 40;
+    let lo = 0;
+    let hi = 160;
+    for (let i = 0;i < 16; i++) {
+      const mid2 = (lo + hi) / 2;
+      const p = seat(sh.crown, inset, side * mid2);
+      if (side * (p.x - 170) < offset)
+        lo = mid2;
+      else
+        hi = mid2;
+    }
+    const anchor = seat(sh.crown, inset, side * (lo + hi) / 2);
+    const angle = clamp(anchor.a, -40, 40);
+    const parts = [];
+    if (cap) {
+      parts.push(n("path", "headwear.crown", {
+        ...line,
+        fill: INK.paper,
+        d: "M-33 0C-35 -20 -20 -39 0 -39C20 -39 35 -20 33 0Z"
+      }), n("path", "headwear.seam", {
+        ...line,
+        "stroke-width": w(3.5),
+        d: "M-4 -38Q9 -24 8 -1"
+      }), n("path", "headwear.brim", {
+        ...line,
+        "stroke-width": w(7),
+        d: side > 0 ? "M-35 1Q8 4 52 3" : "M-52 3Q-8 4 35 1"
+      }), n("circle", "headwear.button", {
+        cx: 0,
+        cy: -40,
+        r: 3.5,
+        fill: INK.ink
+      }));
+    } else if (sprout) {
+      parts.push(n("path", "headwear.halo", {
+        ...line,
+        stroke: fill,
+        "stroke-width": w(11),
+        d: `${STEM}${LEAF0}${LEAF1}`
+      }), n("path", "headwear.stem", {
+        ...line,
+        "stroke-width": w(4.5),
+        d: STEM
+      }), n("path", "headwear.leaf0", {
+        ...line,
+        "stroke-width": w(4),
+        fill: COLORS.mint.body,
+        d: LEAF0
+      }), n("path", "headwear.leaf1", {
+        ...line,
+        "stroke-width": w(4),
+        fill: COLORS.mint.deep,
+        d: LEAF1
+      }));
+    } else {
+      parts.push(n("path", "headwear.wings", {
+        d: "M-3 0C-13 -16 -28 -23 -29 -10C-31 2 -26 19 -16 13L-3 4L3 4L16 13C26 19 31 2 29 -10C28 -23 13 -16 3 0Z",
+        fill: INK.ink,
+        stroke: fill,
+        "stroke-width": w(6),
+        "stroke-linejoin": "round",
+        "paint-order": "stroke"
+      }), n("ellipse", "headwear.knot", {
+        cx: 0,
+        cy: 1,
+        rx: 6,
+        ry: 8,
+        fill: ACCESSORY_INK.knot
+      }));
+    }
+    wardrobe.push(n("g", "headwear", {
+      transform: `translate(${f2(anchor.x)} ${f2(anchor.y)}) rotate(${f2(sprout ? angle * 0.5 : angle)})`
+    }, parts));
+  }
+  if (who.neckwear === "tie") {
+    const skew = Math.abs(Math.sin(g("mk") * RAD2)) * mw;
+    const bottom = Math.max(0, mt * kb, mb * kb) + skew + m.sw * st;
+    wardrobe.push(n("g", "neckwear", {
+      transform: `translate(${m.x} ${f2(m.y + g("my") + bottom + 8)})`,
+      fill: INK.ink
+    }, [
+      n("path", "neckwear.knot", {
+        d: "M-9 0Q-11 0 -9 4L-5 11Q0 15 5 11L9 4Q11 0 9 0Z"
+      }),
+      n("path", "neckwear.blade", {
+        d: "M-4 15L-13 63Q-14 66 -11 69L0 79L11 69Q14 66 13 63L4 15Z"
+      })
+    ]));
+  }
+  return [
+    [bodyNode, ...cheeks, trait],
+    [...eyes, ...brows, mouth, ...wardrobe]
+  ];
+}
+
+// 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
+var wear = (o, base, s) => ACCESSORIES[s].includes(o[s]) ? o[s] : base[s];
+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,
+    eyewear: wear(o, base, "eyewear"),
+    headwear: wear(o, base, "headwear"),
+    neckwear: wear(o, base, "neckwear")
+  };
+  const pose = restPose(who, o.expression ?? "normal", o.gaze);
+  const variant = VARIANTS.includes(o.variant) ? o.variant : "peek";
+  const look = {
+    size: o.size ?? 64,
+    frame: o.frame ?? "ink",
+    square: o.square ?? true,
+    riso: o.riso ?? false,
+    live,
+    ...variant !== "peek" && { variant }
+  };
+  const { eyewear, headwear, neckwear, ...legacy } = who;
+  const wardrobe = eyewear !== "none" || headwear !== "none" || neckwear !== "none";
+  const id = o.id ?? `peek-${fnv1a(JSON.stringify([wardrobe ? who : legacy, 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/vue.ts
+function toVue(node, ref2) {
+  return h(node.tag, { key: node.key, ...node.attrs, ref: ref2 }, node.children.map((c) => toVue(c)));
+}
+var any = { type: null, default: undefined };
+var flag = { type: Boolean, default: undefined };
+var Peek = defineComponent((props) => {
+  const id = `peek${useId().replace(/[^\w-]/g, "")}`;
+  const svg = ref();
+  let live = null;
+  const fixedOf = (g) => Array.isArray(g) ? g : undefined;
+  const first = {
+    expression: props.expression ?? "normal",
+    gaze: fixedOf(props.gaze)
+  };
+  const view = computed(() => {
+    const { name, gaze, animate, ...rest } = props;
+    const { who, pose, opts } = settle(name, { ...rest, gaze: fixedOf(gaze), id }, animate);
+    const tree = draw(who, animate ? restPose(who, first.expression, first.gaze) : pose, opts);
+    return { who, opts, tree, sig: JSON.stringify([who, opts]) };
+  });
+  const expression = () => props.expression ?? "normal";
+  onMounted(() => {
+    watch([() => props.animate, () => view.value.sig], () => {
+      live?.destroy();
+      live = null;
+      if (!props.animate || !svg.value)
+        return;
+      const { tree, who, opts } = view.value;
+      live = new Live(svg.value, tree, who, opts, expression(), props.gaze);
+    }, { immediate: true, flush: "post" });
+    watch(expression, (e) => live?.setExpression(e), { flush: "post" });
+    watch(() => String(props.gaze ?? ""), () => live?.setGaze(props.gaze), { flush: "post" });
+  });
+  onBeforeUnmount(() => live?.destroy());
+  return () => toVue(view.value.tree, svg);
+}, {
+  name: "Peek",
+  props: {
+    name: { type: String, required: true },
+    gaze: any,
+    animate: { type: Boolean, default: false },
+    size: { type: Number, default: undefined },
+    expression: any,
+    frame: any,
+    square: flag,
+    title: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    riso: flag,
+    version: { type: Number, default: undefined },
+    variant: any,
+    face: any,
+    color: any,
+    eyes: any,
+    brows: any,
+    mouth: any,
+    cheeks: any,
+    trait: any,
+    eyewear: any,
+    headwear: any,
+    neckwear: any
+  }
+});
+export {
+  ACCESSORIES,
+  AXES,
+  BLOC,
+  COLORS,
+  EXPRESSIONS,
+  FACES,
+  GROUPS,
+  HAZE,
+  LATEST,
+  LISTS,
+  PARTS,
+  Peek,
+  VARIANTS,
+  VERSIONS,
+  WHEEL,
+  draw,
+  identify,
+  settle,
+  tidy,
+  toSvg
+};