@doan-labs/peek 0.1.0 → 1.1.0

package/dist/svg.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 BASE = {
@@ -335,6 +352,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];
@@ -709,7 +729,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];
@@ -722,7 +742,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;
@@ -757,7 +777,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,
@@ -847,8 +867,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,
@@ -882,6 +902,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})`,
@@ -894,7 +1077,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") {
@@ -960,7 +1143,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) {
@@ -1004,11 +1188,15 @@ 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/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 = {
@@ -1019,7 +1207,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 = {
@@ -1029,7 +1220,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;

package/dist/tables.d.ts

@@ -218,6 +218,19 @@ export declare const PARTS: {
     readonly cheeks: readonly ["oval", "dots", "lines"];
     readonly trait: readonly ["square", "fin", "ring", "dot", "peak"];
 };
+export declare const ACCESSORY_INK: {
+    readonly knot: "#E5412D";
+};
+/** Independent wardrobe slots. peek@1 picks none; callers can dress it. */
+export declare const ACCESSORIES: {
+    readonly eyewear: readonly ["none", "glasses", "sunglasses"];
+    readonly headwear: readonly ["none", "bow", "cap", "sprout"];
+    readonly neckwear: readonly ["none", "tie"];
+};
+export type Eyewear = (typeof ACCESSORIES.eyewear)[number];
+export type Headwear = (typeof ACCESSORIES.headwear)[number];
+export type Neckwear = (typeof ACCESSORIES.neckwear)[number];
+export type AccessorySlot = keyof typeof ACCESSORIES;
 export type Face = keyof typeof FACES;
 export type Color = keyof typeof COLORS;
 export type Part = keyof typeof PARTS;
@@ -226,7 +239,7 @@ export type Brows = (typeof PARTS.brows)[number];
 export type Mouth = (typeof PARTS.mouth)[number];
 export type Cheeks = (typeof PARTS.cheeks)[number];
 export type Trait = (typeof PARTS.trait)[number];
-export type Axis = 'face' | 'color' | Part;
+export type Axis = 'face' | 'color' | Part | AccessorySlot;
 /** How much of each list a version may pick from. Append-only too. */
 export declare const VERSIONS: Record<number, Record<Axis, number>>;
 export declare const LATEST = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doan-labs/peek",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,6 +39,8 @@
     "typescript": "^6.0.2"
   },
   "description": "Deterministic SVG avatars from a name, with expressions and a React component.",
+  "license": "MIT",
+  "author": "Doan Labs",
   "homepage": "https://peek.doan-labs.com",
   "repository": {
     "type": "git",

package/src/draw.ts

@@ -11,6 +11,7 @@
 
 import type { Axes, Persona } from './identity'
 import {
+  ACCESSORY_INK,
   type Channel,
   type Channels,
   COLORS,
@@ -74,6 +75,10 @@ const f3 = (v: number) => String(Math.round(v * 1000) / 1000)
 const strokeFor = (px: number) =>
   px >= 96 ? 1 : px >= 56 ? 1.25 : px >= 40 ? 1.6 : px >= 30 ? 2 : 2.4
 const RAD = Math.PI / 180
+// the sprout, drawn upward from where it is planted
+const STEM = 'M0 0Q3 -19 0 -36'
+const LEAF0 = 'M0 -33C-24 -30 -38 -52 -25 -53C-12 -54 -2 -43 0 -33Z'
+const LEAF1 = 'M0 -33C5 -54 28 -61 27 -48C26 -36 11 -31 0 -33Z'
 
 /** Where a face rests: the body offset, the eye line, one altitude unit. */
 export function frameOf(face: FaceGeom) {
@@ -760,6 +765,221 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   }
   const trait = n('g', 'trait', { transform: traitT }, [shape])
 
+  // Wardrobe lives on the same body transform as the face. Glasses grow
+  // around the eye sockets, never around the pupils, so gaze stays free.
+  const wardrobe: Node[] = []
+  // strokes follow the same ramp as the face, capped so small hats stay hats
+  const w = (px: number) => 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: Node[] = [
+      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') {
+    // Reserve the side opposite the crest. The seat stays fixed through
+    // expressions, so a moving crest never makes a hat switch sides.
+    const side = who.trait === 'ring' || who.trait === 'dot' ? -1 : 1
+    const cap = who.headwear === 'cap'
+    const sprout = who.headwear === 'sprout'
+    // The sheet measures placement across the crown, not along its arc.
+    // Solve that horizontal offset so low, round faces keep the brim above
+    // their brows instead of walking the hat down the side of the body.
+    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 mid = (lo + hi) / 2
+      const p = seat(sh.crown, inset, side * mid)
+      if (side * (p.x - 170) < offset) lo = mid
+      else hi = mid
+    }
+    const anchor = seat(sh.crown, inset, (side * (lo + hi)) / 2)
+    const angle = clamp(anchor.a, -40, 40)
+    const parts: Node[] = []
+    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(
+        // a body-colored halo keeps the ink stem off an ink ground
+        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,
+          // the same halo, painted under the fill
+          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') {
+    // The knot follows the mouth's lowest edge, including its skew. The
+    // floor clips the blade, just as it clips the creature itself.
+    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',
+          }),
+        ],
+      ),
+    )
+  }
+
   // the plates sit a hair out of register at large sizes
   const off = (dx: number, dy: number) =>
     riso ? `translate(${f2(dx * k * upp)} ${f2(dy * k * upp)})` : undefined
@@ -787,7 +1007,7 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
           transform: off(0.6, -0.5),
           filter: riso ? `url(#${id}-pB)` : undefined,
         },
-        [...eyes, ...brows, mouth],
+        [...eyes, ...brows, mouth, ...wardrobe],
       ),
     ],
   )

package/src/identity.ts

@@ -9,16 +9,20 @@
  */
 
 import {
+  ACCESSORIES,
   type Axis,
   type Brows,
   type Cheeks,
   COLORS,
   type Color,
   type Eyes,
+  type Eyewear,
   FACES,
   type Face,
+  type Headwear,
   LATEST,
   type Mouth,
+  type Neckwear,
   PARTS,
   type Trait,
   VERSIONS,
@@ -74,6 +78,9 @@ export type Axes = {
   mouth: Mouth
   cheeks: Cheeks
   trait: Trait
+  eyewear: Eyewear
+  headwear: Headwear
+  neckwear: Neckwear
 }
 
 export type Identity = Axes & {
@@ -90,6 +97,7 @@ export const LISTS: { readonly [A in Axis]: readonly Axes[A][] } = {
   face: Object.keys(FACES) as Face[],
   color: Object.keys(COLORS) as Color[],
   ...PARTS,
+  ...ACCESSORIES,
 }
 /** The axes in readout order. */
 export const AXES = Object.keys(LISTS) as Axis[]
@@ -142,6 +150,9 @@ export function identify(
     mouth: pick('mouth'),
     cheeks: pick('cheeks'),
     trait: pick('trait'),
+    eyewear: pick('eyewear'),
+    headwear: pick('headwear'),
+    neckwear: pick('neckwear'),
     persona,
   }
 }

package/src/index.ts

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

package/src/peek.tsx

@@ -3,7 +3,7 @@
  * come from useId, so the server and the client agree.
  *
  * A name decides identity unless the caller overrides an axis: pass `face`,
- * `color`, `eyes`, `brows`, `mouth`, `cheeks` or `trait` and that axis wins
+ * `color`, a part, or a wardrobe slot and that axis wins
  * over the hash while every other axis stays as the name made it.
  *
  * With `animate`, the first paint (server and hydration) is still the static