@doan-labs/peek 1.0.0 → 2.0.0

package/dist/index.js

@@ -114,6 +114,34 @@ var COLORS = {
   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"],
@@ -121,8 +149,25 @@ var PARTS = {
   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 }
+  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 = {
@@ -330,6 +375,240 @@ var EXPRESSIONS = {
   })
 };
 
+// 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();
@@ -352,7 +631,8 @@ function mulberry32(a) {
 var LISTS = {
   face: Object.keys(FACES),
   color: Object.keys(COLORS),
-  ...PARTS
+  ...PARTS,
+  ...ACCESSORIES
 };
 var AXES = Object.keys(LISTS);
 function seed(name, axis, version = LATEST) {
@@ -396,17 +676,12 @@ function identify(name, { version = LATEST } = {}) {
     mouth: pick("mouth"),
     cheeks: pick("cheeks"),
     trait: pick("trait"),
+    eyewear: pick("eyewear"),
+    headwear: pick("headwear"),
+    neckwear: pick("neckwear"),
     persona
   };
 }
-// src/peek.tsx
-import {
-  createElement,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
 
 // src/draw.ts
 var VB = [-30, -30, 400, 400];
@@ -419,8 +694,11 @@ var smooth = (a, b, v) => {
 };
 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;
+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];
@@ -449,18 +727,18 @@ function seat(crown, d, u) {
   const at = ([x, y], b2) => ({
     x: x + R * Math.sin(b2),
     y: y - R * Math.cos(b2),
-    a: b2 / RAD
+    a: b2 / RAD2
   });
   const P = crown.poly;
   if (P.length === 1)
     return at(P[0], R ? u / R : 0);
-  const n = P.length;
+  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 < n; step++) {
-    const j = (i + dir + n) % n;
+  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;
@@ -480,7 +758,7 @@ function seat(crown, d, u) {
       return {
         x: x0 + ex / L * left + R * nx,
         y: y0 + ey / L * left + R * ny,
-        a: be / RAD
+        a: be / RAD2
       };
     left -= L;
     i = j;
@@ -507,7 +785,7 @@ function depth(crown, x, y) {
   }
   return (out <= 0 ? out : near) - crown.r;
 }
-var RING_U = 158 * 35 * RAD;
+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;
@@ -541,14 +819,11 @@ function prune(node) {
 }
 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] };
@@ -642,7 +917,165 @@ function draw(who, pose, o) {
   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", {
+  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,
@@ -730,25 +1163,36 @@ function draw(who, pose, o) {
     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})` }, [
-        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
-        })
-      ])
+      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`, {
@@ -782,9 +1226,7 @@ function draw(who, pose, o) {
       "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);
+    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");
@@ -795,7 +1237,7 @@ function draw(who, pose, o) {
     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 [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];
@@ -804,11 +1246,11 @@ function draw(who, pose, o) {
     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 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 = w * (2 * t - 1);
+        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;
@@ -821,7 +1263,7 @@ function draw(who, pose, o) {
     let hi = 0;
     if (!inside(0)) {
       hi = 40;
-      for (let k3 = 0;k3 < 12; k3++) {
+      for (let k = 0;k < 12; k++) {
         const mid2 = (lo + hi) / 2;
         if (inside(mid2))
           hi = mid2;
@@ -843,7 +1285,7 @@ function draw(who, pose, o) {
       });
     }
     return n("path", key, {
-      d: `M${f2(-w)} 0Q0 ${f2(ca)} ${f2(w)} 0`,
+      d: `M${f2(-w2)} 0Q0 ${f2(ca)} ${f2(w2)} 0`,
       transform,
       fill: "none",
       stroke: INK.ink,
@@ -924,7 +1366,7 @@ function draw(who, pose, o) {
       fill: deep
     });
   } else if (who.trait === "fin") {
-    const s = seat(sh.crown, -6, -164 * 22 * RAD);
+    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", {
@@ -933,8 +1375,8 @@ function draw(who, pose, o) {
     });
   } 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));
+    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,
@@ -946,7 +1388,7 @@ function draw(who, pose, o) {
     });
   } else if (who.trait === "dot") {
     const s = clamp(-hair, 0, 1.2);
-    const th = Math.min(1, s / 0.35) * 61.05 * RAD;
+    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;
@@ -968,61 +1410,228 @@ function draw(who, pose, o) {
     });
   }
   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)
+  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
         }));
       }
-    scene.push(n("g", "lattice", { fill: o.frame === "ink" ? INK.bone : INK.ink }, dots));
+    }
+    wardrobe.push(n("g", "eyewear", {}, frames));
   }
-  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;
+  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/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/peek.tsx
+import {
+  createElement,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
 
 // src/animate.ts
 var GROUP_OF = {};
@@ -1600,45 +2209,6 @@ class Live {
   }
 }
 
-// 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) {
@@ -1684,17 +2254,24 @@ function Peek({
   return toReact(tree, { ref: svg, className, style });
 }
 export {
+  ACCESSORIES,
   AXES,
+  BLOC,
   COLORS,
   EXPRESSIONS,
   FACES,
   GROUPS,
+  HAZE,
   LATEST,
   LISTS,
   PARTS,
   Peek,
+  VARIANTS,
   VERSIONS,
+  WHEEL,
+  draw,
   identify,
+  settle,
   tidy,
   toSvg
 };