@doan-labs/peek 0.1.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Doan Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -19,6 +19,21 @@ import { Peek } from '@doan-labs/peek'
 Use `animate` for blinking and expression transitions, and
 `gaze='pointer'` to follow the pointer. Animation respects reduced motion.
 
+## Accessories
+
+Dress a face with three independent slots:
+
+```tsx
+<Peek name='Linh' eyewear='glasses' headwear='bow' />
+<Peek name='Linh' eyewear='sunglasses' headwear='sprout' />
+<Peek name='Linh' headwear='cap' neckwear='tie' animate />
+```
+
+Eyewear: `none`, `glasses`, `sunglasses`. Headwear: `none`, `bow`, `cap`,
+`sprout`. Neckwear: `none`, `tie`. All default to `none` at `peek@1`, so
+existing avatars stay unchanged. Slots combine and work with every
+expression, gaze and frame. The same options work with `toSvg`.
+
 ## Plain SVG, without React
 
 The SVG and identity entry points have no runtime dependencies:
@@ -36,3 +51,7 @@ The same normalized name and options produce the same SVG every time.
 
 See the [documentation](https://peek.doan-labs.com/docs) for options,
 expressions, identity axes and versioned styles.
+
+## License
+
+[MIT](./LICENSE) © Doan Labs

package/dist/identity.d.ts

@@ -1,4 +1,4 @@
-import { type Axis, type Brows, type Cheeks, type Color, type Eyes, type Face, type Mouth, type Trait } from './tables.js';
+import { type Axis, type Brows, type Cheeks, type Color, type Eyes, type Eyewear, type Face, type Headwear, type Mouth, type Neckwear, type Trait } from './tables.js';
 export declare const STYLE = "peek";
 export declare const tidy: (s: string) => string;
 /** FNV-1a over the UTF-8 bytes. */
@@ -34,6 +34,9 @@ export type Axes = {
     mouth: Mouth;
     cheeks: Cheeks;
     trait: Trait;
+    eyewear: Eyewear;
+    headwear: Headwear;
+    neckwear: Neckwear;
 };
 export type Identity = Axes & {
     /** The tidied name. */

package/dist/identity.js

@@ -116,8 +116,24 @@ var PARTS = {
   cheeks: ["oval", "dots", "lines"],
   trait: ["square", "fin", "ring", "dot", "peak"]
 };
+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 BASE = {
@@ -339,7 +355,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) {
@@ -383,6 +400,9 @@ function identify(name, { version = LATEST } = {}) {
     mouth: pick("mouth"),
     cheeks: pick("cheeks"),
     trait: pick("trait"),
+    eyewear: pick("eyewear"),
+    headwear: pick("headwear"),
+    neckwear: pick("neckwear"),
     persona
   };
 }

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-export type { Frame, Gaze } from './draw.js';
+export type { Frame, Gaze, Node } from './draw.js';
+/** Low level: the drawing tree that toSvg and <Peek> both render. */
+export { draw } from './draw.js';
 export type { Axes, Identity, Persona } from './identity.js';
 export { AXES, identify, LISTS, tidy } from './identity.js';
 export type { PeekProps } from './peek.js';
 export { Peek } from './peek.js';
 export type { PeekOptions } from './svg.js';
-export { toSvg } from './svg.js';
-export type { Axis, Brows, Channel, Cheeks, Color, Expression, Eyes, Face, Mouth, Trait, } from './tables.js';
-export { COLORS, EXPRESSIONS, FACES, GROUPS, LATEST, PARTS, VERSIONS, } from './tables.js';
+export { settle, toSvg } from './svg.js';
+export type { AccessorySlot, Axis, Brows, Channel, Cheeks, Color, Expression, Eyes, Eyewear, Face, Headwear, Mouth, Neckwear, Trait, } from './tables.js';
+export { ACCESSORIES, COLORS, EXPRESSIONS, FACES, GROUPS, LATEST, PARTS, VERSIONS, } from './tables.js';

package/dist/index.js

@@ -121,8 +121,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,84 +347,6 @@ var EXPRESSIONS = {
   })
 };
 
-// src/identity.ts
-var STYLE = "peek";
-var tidy = (s) => s.normalize("NFC").trim().replace(/\s+/g, " ").toLowerCase();
-function fnv1a(str) {
-  let h = 2166136261;
-  for (const b of new TextEncoder().encode(str)) {
-    h ^= b;
-    h = Math.imul(h, 16777619) >>> 0;
-  }
-  return h >>> 0;
-}
-function mulberry32(a) {
-  return () => {
-    a = a + 1831565813 | 0;
-    let t = Math.imul(a ^ a >>> 15, 1 | a);
-    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-    return ((t ^ t >>> 14) >>> 0) / 4294967296;
-  };
-}
-var LISTS = {
-  face: Object.keys(FACES),
-  color: Object.keys(COLORS),
-  ...PARTS
-};
-var AXES = Object.keys(LISTS);
-function seed(name, axis, version = LATEST) {
-  return fnv1a(`${STYLE}@${version}:${axis}:${tidy(name)}`);
-}
-function identify(name, { version = LATEST } = {}) {
-  const lengths = VERSIONS[version];
-  if (!lengths)
-    throw new Error(`peek@${version} does not exist`);
-  const pick = (axis) => LISTS[axis][seed(name, axis, version) % lengths[axis]];
-  const rnd = mulberry32(seed(name, "persona", version));
-  const r = (a, b) => Math.round((a + rnd() * (b - a)) * 100) / 100;
-  const persona = {
-    spread: r(-7, 7),
-    blink: r(0.75, 1.4),
-    add: {
-      browY: r(-4, 4),
-      browTilt: r(-5, 5),
-      browArch: r(-0.2, 0.3),
-      rot: r(-3, 3),
-      hair: r(-0.2, 0.35),
-      gx: r(-0.12, 0.12),
-      my: r(-2, 3)
-    },
-    mul: {
-      eyeS: r(0.92, 1.08),
-      pupil: r(0.9, 1.12),
-      browW: r(0.85, 1.2),
-      mw: r(0.85, 1.18)
-    }
-  };
-  const key = tidy(name);
-  return {
-    key,
-    hash: fnv1a(key),
-    version,
-    face: pick("face"),
-    color: pick("color"),
-    eyes: pick("eyes"),
-    brows: pick("brows"),
-    mouth: pick("mouth"),
-    cheeks: pick("cheeks"),
-    trait: pick("trait"),
-    persona
-  };
-}
-// src/peek.tsx
-import {
-  createElement,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-
 // src/draw.ts
 var VB = [-30, -30, 400, 400];
 var FLOOR = 370;
@@ -421,6 +360,9 @@ 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 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];
@@ -795,7 +737,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];
@@ -808,7 +750,7 @@ function draw(who, pose, o) {
     const sin = Math.sin(side * btilt * RAD);
     const inside = (dy) => {
       for (let t = 0;t <= 1; t += 0.25) {
-        const lx = w * (2 * t - 1);
+        const 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;
@@ -843,7 +785,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,
@@ -933,8 +875,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) * RAD));
     traitT = `translate(${f2(s.x)} ${f2(s.y)}) scale(${f2(1 + Math.max(0, hair) * 0.1)})`;
     shape = n("circle", "trait.shape", {
       cx: 0,
@@ -968,6 +910,169 @@ function draw(who, pose, o) {
     });
   }
   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") * RAD)) * 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"
+      })
+    ]));
+  }
   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})`,
@@ -980,7 +1085,7 @@ function draw(who, pose, o) {
     n("g", "plateB", {
       transform: off(0.6, -0.5),
       filter: riso ? `url(#${id}-pB)` : undefined
-    }, [...eyes, ...brows, mouth])
+    }, [...eyes, ...brows, mouth, ...wardrobe])
   ]);
   const scene = [];
   if (o.frame !== "none") {
@@ -1023,6 +1128,87 @@ function draw(who, pose, o) {
   ]);
   return o.live ? root : prune(root) ?? root;
 }
+// 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/peek.tsx
+import {
+  createElement,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
 
 // src/animate.ts
 var GROUP_OF = {};
@@ -1601,6 +1787,7 @@ class Live {
 }
 
 // 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 = {
@@ -1611,7 +1798,10 @@ function settle(name, o, live = false) {
     brows: o.brows ?? base.brows,
     mouth: o.mouth ?? base.mouth,
     cheeks: o.cheeks ?? base.cheeks,
-    trait: o.trait ?? base.trait
+    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 look = {
@@ -1621,7 +1811,9 @@ function settle(name, o, live = false) {
     riso: o.riso ?? false,
     live
   };
-  const id = o.id ?? `peek-${fnv1a(JSON.stringify([who, pose, look])).toString(36)}`;
+  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;
@@ -1684,6 +1876,7 @@ function Peek({
   return toReact(tree, { ref: svg, className, style });
 }
 export {
+  ACCESSORIES,
   AXES,
   COLORS,
   EXPRESSIONS,
@@ -1694,7 +1887,9 @@ export {
   PARTS,
   Peek,
   VERSIONS,
+  draw,
   identify,
+  settle,
   tidy,
   toSvg
 };

package/dist/svg.d.ts

@@ -1,6 +1,6 @@
 import { type DrawOptions, type Frame, type Gaze, type Node, type Pose } from './draw.js';
 import { type Axes, type Identity } from './identity.js';
-import type { Expression } from './tables.js';
+import { type Expression } from './tables.js';
 export type PeekOptions = Partial<Axes> & {
     /** px. Drives the stroke ramp (thicker below 96) and the riso print. */
     size?: number;