@doan-labs/peek 1.1.0 → 2.0.0

package/src/draw.ts

@@ -9,7 +9,8 @@
  * what is invisible (opacity 0) to stay small.
  */
 
-import type { Axes, Persona } from './identity'
+import { blocParts } from './bloc'
+import { type Axes, fnv1a, mulberry32, type Persona } from './identity'
 import {
   ACCESSORY_INK,
   type Channel,
@@ -19,7 +20,10 @@ import {
   type Expression,
   FACES,
   type FaceGeom,
+  HAZE,
   INK,
+  type Variant,
+  WHEEL,
 } from './tables'
 
 export type Node = {
@@ -55,9 +59,12 @@ export type DrawOptions = {
   title: string | false
   /** Keep invisible nodes so an animator can write into them. */
   live?: boolean
+  /** How the face is drawn. Default 'peek'. */
+  variant?: Variant
 }
 
-export type Drawable = Axes & { persona: Persona }
+/** `key`, the tidied name, seeds Haze's blobs; without it, it hazes as ''. */
+export type Drawable = Axes & { persona: Persona; key?: string }
 
 /* The frame: viewBox -30 -30 400 400, the floor on its bottom edge. */
 export const VB = [-30, -30, 400, 400] as const
@@ -70,7 +77,7 @@ export const smooth = (a: number, b: number, v: number) => {
   const t = clamp((v - a) / (b - a), 0, 1)
   return t * t * (3 - 2 * t)
 }
-const f2 = (v: number) => String(Math.round(v * 100) / 100)
+export const f2 = (v: number) => String(Math.round(v * 100) / 100)
 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
@@ -213,7 +220,12 @@ export function ringWalk(sh: FaceGeom): { rest: number; min: number } {
 }
 
 type Attrs = Record<string, string | number | false | undefined>
-function n(tag: string, key: string, attrs: Attrs, children: Node[] = []) {
+export function n(
+  tag: string,
+  key: string,
+  attrs: Attrs,
+  children: Node[] = [],
+) {
   const out: Record<string, string> = {}
   for (const k in attrs) {
     const v = attrs[k]
@@ -232,14 +244,11 @@ function prune(node: Node): Node | null {
 
 export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   const sh: FaceGeom = FACES[who.face]
-  const { body: fill, deep } = COLORS[who.color]
   const P = who.persona
   const mul = P.mul as Partial<Record<Channel, number>>
   const add = P.add as Partial<Record<Channel, number>>
   const g = (c: Channel) => 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: Node[] = []
 
@@ -368,8 +377,262 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
   const B = sh.bottom
   const ty = baseY - alt * R
   const sc = (v: number) => Math.round(v * 100000) / 100000
-  const bodyNode =
+  const [front, back] = (o.variant === 'bloc' ? blocParts : peekParts)({
+    who,
+    pose,
+    o,
+    defs,
+    g,
+  })
+
+  // 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
+  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,
+      ),
+    ],
+  )
+
+  // the thing in the corner: a dot lattice from the mark's vocabulary
+  const scene: Node[] = []
+  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: Node[] = []
+    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)
+}
+
+/** What a variant draws from: the defs it may add to, and the pose reader. */
+export type Parts = {
+  who: Drawable
+  pose: Pose
+  o: DrawOptions
+  defs: Node[]
+  /** A channel with the persona applied. */
+  g: (c: Channel) => number
+}
+
+/*
+ * Haze, from the Haze sheet: the body is its own ink plus three soft radial
+ * blobs, cut to the outline. A deep one at the bottom, a tint from a hue
+ * neighbor low on the outer edge, a glow at the top. Where they sit comes
+ * from the name, mulberry32(fnv1a('haze:' + key)), so two faces of one
+ * color haze apart.
+ * Blob sizes are in body widths; the light level, used below 32px, keeps
+ * the face nearly peek where the haze would only be mud.
+ */
+const 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],
+    ],
+  },
+} as const
+
+function hazePaint(who: Drawable, o: DrawOptions): Node[] {
+  const sh: FaceGeom = FACES[who.face]
+  const id = o.id
+  const L = HAZE_LEVEL[o.size < 32 ? 'light' : 'medium']
+  // the body's box: the crown grown by its radius, down to the bottom
+  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
+
+  // the sheet's own seed and draw order, fitted to its 12 names: never
+  // reorder these lines. The tint walks one track, low and out to high and in.
+  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: number, onLeft: boolean) =>
+    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: string,
+    color: string,
+    [cx, cy, a, rx, ry]: [number, number, number, number, number],
+    stops: readonly (readonly [number, number])[],
+  ) =>
+    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] as const].map(([at, op], j) =>
+        n('stop', `haze.${k}.${j}`, {
+          offset: at,
+          'stop-color': color,
+          'stop-opacity': op,
+        }),
+      ),
+    )
+  const fade = ([a, b]: readonly [number, number]) =>
+    [
+      [0, a],
+      [0.55, b],
+    ] as const
+  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: string, paint: string) =>
     '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]})`),
+      ),
+    ]),
+  ]
+}
+
+/** The peek face, and Haze: the same face with a hazed body. */
+function peekParts({ who, pose, o, defs, g }: Parts): [Node[], Node[]] {
+  const sh: FaceGeom = FACES[who.face]
+  const { body: fill, deep } = COLORS[who.color]
+  const P = who.persona
+  const spread = P.spread
+  const id = o.id
+  const st = strokeFor(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,
@@ -475,25 +738,47 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
     const lrx = rx * 1.55
     const lry = ry * 1.15
     const top = ry + 1.6 - lower * ry * 1.5
+    // a bead has no white to show where it looks, so the whole eye leans
+    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,
+      }),
+    ]
+    // Haze: the lids cut the body's own paint, so they never read as patches
+    if (haze)
+      defs.push(n('clipPath', `${kk}.lidshape`, { id: `${id}-s${i}` }, lids))
     const parts: Node[] = [
       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,
+      ),
     ]
     // a rimmed eye inks its lid edges too, so the outline follows the lids
     if (who.eyes === 'ring')
@@ -538,17 +823,7 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
         opacity: co > 0.01 ? f2(co) : 0,
       }),
     )
-    return n(
-      'g',
-      kk,
-      {
-        // a bead has no white to show where it looks, so the whole eye leans
-        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)
   })
 
   // brows
@@ -980,90 +1255,8 @@ export function draw(who: Drawable, pose: Pose, o: DrawOptions): Node {
     )
   }
 
-  // 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
-  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, ...wardrobe],
-      ),
-    ],
-  )
-
-  // the thing in the corner: a dot lattice from the mark's vocabulary
-  const scene: Node[] = []
-  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: Node[] = []
-    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)
+  return [
+    [bodyNode, ...cheeks, trait],
+    [...eyes, ...brows, mouth, ...wardrobe],
+  ]
 }

package/src/index.ts

@@ -1,35 +1,3 @@
-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 * from './core'
 export type { PeekProps } from './peek'
 export { Peek } from './peek'
-export type { PeekOptions } from './svg'
-export { settle, toSvg } from './svg'
-export type {
-  AccessorySlot,
-  Axis,
-  Brows,
-  Channel,
-  Cheeks,
-  Color,
-  Expression,
-  Eyes,
-  Eyewear,
-  Face,
-  Headwear,
-  Mouth,
-  Neckwear,
-  Trait,
-} from './tables'
-export {
-  ACCESSORIES,
-  COLORS,
-  EXPRESSIONS,
-  FACES,
-  GROUPS,
-  LATEST,
-  PARTS,
-  VERSIONS,
-} from './tables'

package/src/peek.svelte

@@ -0,0 +1,75 @@
+<!--
+  <Peek name="Ada" /> for Svelte 5: the same tree and the same rules as the
+  React component in peek.tsx. ids come from $props.id(), so the server and
+  the client agree. The inside of the svg is the exact markup toSvg writes.
+
+  With `animate`, the markup stays in the pose the component mounted with and
+  the shared loop writes every frame straight to the DOM, so a change of
+  expression or gaze never reaches Svelte.
+-->
+<script lang="ts">
+import { untrack } from 'svelte'
+import {
+  draw,
+  Live,
+  type PeekProps,
+  restPose,
+  serialize,
+  settle,
+} from './svelte-peek'
+
+let {
+  name,
+  gaze,
+  animate = false,
+  class: className,
+  style,
+  ...rest
+}: PeekProps = $props()
+const uid = $props.id()
+const id = `peek${uid.replace(/[^\w-]/g, '')}`
+const fixedOf = (g: PeekProps['gaze']) =>
+  Array.isArray(g) ? (g as readonly [number, number]) : undefined
+const first = untrack(() => ({
+  expression: rest.expression ?? 'normal',
+  gaze: fixedOf(gaze),
+}))
+
+const s = $derived(settle(name, { ...rest, gaze: fixedOf(gaze), id }, animate))
+const tree = $derived(
+  draw(
+    s.who,
+    animate ? restPose(s.who, first.expression, first.gaze) : s.pose,
+    s.opts,
+  ),
+)
+const inner = $derived(tree.children.map(serialize).join(''))
+const expression = $derived(rest.expression ?? 'normal')
+// live: the face only restarts when what the face is changes
+const sig = $derived(JSON.stringify([s.who, s.opts]))
+const gazeKey = $derived(String(gaze ?? ''))
+
+let svg: SVGSVGElement | undefined
+let live: Live | null = null
+
+$effect(() => {
+  void sig
+  if (!animate || !svg) return
+  const l = untrack(() => new Live(svg!, tree, s.who, s.opts, expression, gaze))
+  live = l
+  return () => {
+    l.destroy()
+    live = null
+  }
+})
+$effect(() => {
+  live?.setExpression(expression)
+})
+$effect(() => {
+  void gazeKey
+  untrack(() => live?.setGaze(gaze))
+})
+</script>
+
+<!-- spread, so an unset class is no attribute rather than class="" -->
+<svg bind:this={svg} {...tree.attrs} {...{ class: className, style }}>{@html inner}</svg>

package/src/peek.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte'
+import type { PeekProps } from './svelte-peek'
+
+declare const Peek: Component<PeekProps>
+export default Peek

package/src/svelte-peek.ts

@@ -0,0 +1,18 @@
+/* What peek.svelte imports. Built as its own file, since the component ships
+ * as source and the app's bundler compiles it. */
+import type { Gaze } from './draw'
+import type { PeekOptions } from './svg'
+
+export { Live } from './animate'
+export { draw, restPose } from './draw'
+export { serialize, settle } from './svg'
+
+export type PeekProps = Omit<PeekOptions, 'gaze' | 'id'> & {
+  name: string
+  /** x and y in -1..1, or 'pointer' to follow the pointer (animate only). */
+  gaze?: Gaze | 'pointer'
+  /** Bring it to life after mount. Off under prefers-reduced-motion. */
+  animate?: boolean
+  class?: string
+  style?: string
+}

package/src/svelte.ts

@@ -0,0 +1,3 @@
+export * from './core'
+export { default as Peek } from './peek.svelte'
+export type { PeekProps } from './svelte-peek'

package/src/svg.ts

@@ -13,7 +13,13 @@ import {
   restPose,
 } from './draw'
 import { type Axes, fnv1a, type Identity, identify } from './identity'
-import { ACCESSORIES, type AccessorySlot, type Expression } from './tables'
+import {
+  ACCESSORIES,
+  type AccessorySlot,
+  type Expression,
+  VARIANTS,
+  type Variant,
+} from './tables'
 
 export type PeekOptions = Partial<Axes> & {
   /** px. Drives the stroke ramp (thicker below 96) and the riso print. */
@@ -30,6 +36,8 @@ export type PeekOptions = Partial<Axes> & {
   riso?: boolean
   /** Pin a style version. Default the latest. */
   version?: number
+  /** How the face is drawn: 'peek', 'haze' or 'bloc'. Never who it is. */
+  variant?: Variant
   /** Prefix for ids inside the SVG. Default derived from everything drawn,
    * so two different avatars inlined in one page never share defs. */
   id?: string
@@ -65,12 +73,18 @@ export function settle(
     neckwear: wear(o, base, 'neckwear'),
   }
   const pose = restPose(who, o.expression ?? 'normal', o.gaze)
+  // an unknown variant from untyped callers draws peek
+  const variant = VARIANTS.includes(o.variant as Variant)
+    ? (o.variant as Variant)
+    : 'peek'
   const look = {
     size: o.size ?? 64,
     frame: o.frame ?? 'ink',
     square: o.square ?? true,
     riso: o.riso ?? false,
     live,
+    // left out for peek, so its ids and bytes stay as they were
+    ...(variant !== 'peek' && { variant }),
   }
   // Keep the byte-level peek@1 contract for faces without accessories.
   const { eyewear, headwear, neckwear, ...legacy } = who