@usenavii/core 0.4.0 → 0.6.0

package/dist/parts.js

@@ -133,6 +133,63 @@ var ANCHORS = {
     groundY: 94,
     cheekY: 53,
     cheekOffset: 12
+  },
+  // Squircle — FULL-BLEED. Body fills 0-100, face composed as ID portrait:
+  // upper-third eye line, lower-third mouth, generous cheek/eye spread.
+  squircle: {
+    cx: 50,
+    eyeY: 44,
+    eyeOffset: 13,
+    eyeScale: 1,
+    mouthY: 62,
+    mouthSpan: 8,
+    topperX: 50,
+    topperY: 8,
+    groundY: 98,
+    cheekY: 52,
+    cheekOffset: 24
+  },
+  // Pumpkin — round body w/ slight horizontal lobing. Face mid-low, stem on top.
+  pumpkin: {
+    cx: 50,
+    eyeY: 52,
+    eyeOffset: 11,
+    eyeScale: 1,
+    mouthY: 66,
+    mouthSpan: 9,
+    topperX: 50,
+    topperY: 18,
+    groundY: 88,
+    cheekY: 60,
+    cheekOffset: 20
+  },
+  // Ghost — tall wavy silhouette. Face high (under the "hood"), wavy hem below.
+  ghost: {
+    cx: 50,
+    eyeY: 42,
+    eyeOffset: 8,
+    eyeScale: 1.05,
+    mouthY: 54,
+    mouthSpan: 6,
+    topperX: 50,
+    topperY: 12,
+    groundY: 92,
+    cheekY: 50,
+    cheekOffset: 14
+  },
+  // SkullHead — slightly elongated egg w/ deep eye sockets.
+  skullHead: {
+    cx: 50,
+    eyeY: 50,
+    eyeOffset: 10,
+    eyeScale: 1,
+    mouthY: 70,
+    mouthSpan: 7,
+    topperX: 50,
+    topperY: 16,
+    groundY: 90,
+    cheekY: 60,
+    cheekOffset: 16
   }
 };
 
@@ -153,30 +210,52 @@ var BODY_PATHS = {
   // Taro — gourd shape: small head bulge, fuller bottom
   taro: "M50 14 C58 14 64 22 64 30 C64 36 60 40 60 46 C60 54 76 60 78 76 C80 88 66 91 50 91 C34 91 20 88 22 76 C24 60 40 54 40 46 C40 40 36 36 36 30 C36 22 42 14 50 14 Z",
   // Wisp — tall narrow body, slight bottom flare, ghost-like
-  wisp: "M50 12 C60 12 66 24 66 40 C66 60 74 78 70 90 C64 96 36 96 30 90 C26 78 34 60 34 40 C34 24 40 12 50 12 Z"
+  wisp: "M50 12 C60 12 66 24 66 40 C66 60 74 78 70 90 C64 96 36 96 30 90 C26 78 34 60 34 40 C34 24 40 12 50 12 Z",
+  // Squircle — FULL-BLEED corporate plate. Fills entire viewport with tight
+  // corner radius (~4px). Reads as a tile / ID photo not a contained avatar.
+  // Pairs with `flat: true` packs (Office) — face floats on a wall of color.
+  squircle: "M4 0 C2 0 0 2 0 4 C0 35 0 65 0 96 C0 98 2 100 4 100 C35 100 65 100 96 100 C98 100 100 98 100 96 C100 65 100 35 100 4 C100 2 98 0 96 0 C65 0 35 0 4 0 Z",
+  // Pumpkin — round, slightly wider than tall, with subtle horizontal "lobes"
+  // for the iconic carved-pumpkin gourd shape. Stem area kept clear at top.
+  pumpkin: "M50 18 C70 18 86 30 86 52 C86 74 70 88 50 88 C30 88 14 74 14 52 C14 30 30 18 50 18 Z",
+  // Ghost — soft rounded top with wavy bottom hem (3 humps), evoking a sheet.
+  ghost: "M50 12 C68 12 78 24 78 42 C78 60 80 76 80 88 L74 84 L68 90 L62 84 L56 90 L50 84 L44 90 L38 84 L32 90 L26 84 L20 88 C20 76 22 60 22 42 C22 24 32 12 50 12 Z",
+  // SkullHead — egg-ish shape, slight pinch at jaw for skull silhouette.
+  skullHead: "M50 16 C68 16 80 30 80 50 C80 64 76 72 70 78 L68 86 L60 88 L60 82 L40 82 L40 88 L32 86 L30 78 C24 72 20 64 20 50 C20 30 32 16 50 16 Z"
 };
 function bodyAnchor(id) {
   return ANCHORS[id];
 }
-function renderBodyDefs(_id, _palette, gradId) {
+function renderBodyDefs(_id, palette, gradId, opts) {
+  if (opts?.flat) {
+    return `<radialGradient id="${gradId}"><stop offset="0%" stop-color="${palette.bodyFrom}" /><stop offset="100%" stop-color="${palette.bodyFrom}" /></radialGradient>`;
+  }
   return `
 <radialGradient id="${gradId}" cx="42%" cy="32%" r="68%">
-  <stop offset="0%" stop-color="${_palette.bodyFrom}" />
-  <stop offset="100%" stop-color="${_palette.bodyTo}" />
+  <stop offset="0%" stop-color="${palette.bodyFrom}" />
+  <stop offset="100%" stop-color="${palette.bodyTo}" />
 </radialGradient>`.trim();
 }
-function renderBody(id, palette, gradId) {
+function renderBody(id, palette, gradId, opts) {
   const d = BODY_PATHS[id];
   const a = ANCHORS[id];
+  const flat = opts?.flat === true;
   const outlineColor = withAlpha(palette.ink, 0.18);
-  return [
-    // Ground shadow — soft ellipse just below body, grounds the figure
-    `<ellipse cx="${a.cx}" cy="${a.groundY + 4}" rx="22" ry="2.6" fill="${palette.ink}" opacity="0.16" />`,
-    // Body fill
-    `<path d="${d}" fill="url(#${gradId})" stroke="${outlineColor}" stroke-width="0.7" />`,
-    // Sheen — small light spot upper-left, scaled to body
-    `<ellipse cx="${a.cx - 12}" cy="${a.eyeY - 14}" rx="11" ry="7" fill="#FFFFFF" opacity="0.22" transform="rotate(-18 ${a.cx - 12} ${a.eyeY - 14})" />`
-  ].join("");
+  const parts = [];
+  if (!flat) {
+    parts.push(
+      `<ellipse cx="${a.cx}" cy="${a.groundY + 4}" rx="22" ry="2.6" fill="${palette.ink}" opacity="0.16" />`
+    );
+  }
+  parts.push(
+    flat ? `<path d="${d}" fill="url(#${gradId})" />` : `<path d="${d}" fill="url(#${gradId})" stroke="${outlineColor}" stroke-width="0.7" />`
+  );
+  if (!flat) {
+    parts.push(
+      `<ellipse cx="${a.cx - 12}" cy="${a.eyeY - 14}" rx="11" ry="7" fill="#FFFFFF" opacity="0.22" transform="rotate(-18 ${a.cx - 12} ${a.eyeY - 14})" />`
+    );
+  }
+  return parts.join("");
 }
 function withAlpha(hex, alpha) {
   const h = hex.replace("#", "");
@@ -189,12 +268,13 @@ function withAlpha(hex, alpha) {
 }
 
 // src/parts/eyes.ts
-function renderEyes(id, palette, anchor) {
+function renderEyes(id, palette, anchor, opts) {
   const lx = anchor.cx - anchor.eyeOffset;
   const rx = anchor.cx + anchor.eyeOffset;
   const y = anchor.eyeY;
   const s = anchor.eyeScale;
   const ink = palette.ink;
+  const sw = opts?.strokeMul ?? 1;
   switch (id) {
     case "round":
       return [
@@ -216,24 +296,24 @@ function renderEyes(id, palette, anchor) {
       ].join("");
     case "squint":
       return [
-        arc(lx - 4.5, y, lx, y - 3.5, lx + 4.5, y, ink, 1.8),
-        arc(rx - 4.5, y, rx, y - 3.5, rx + 4.5, y, ink, 1.8)
+        arc(lx - 4.5, y, lx, y - 3.5, lx + 4.5, y, ink, 1.8 * sw),
+        arc(rx - 4.5, y, rx, y - 3.5, rx + 4.5, y, ink, 1.8 * sw)
       ].join("");
     case "wink":
       return [
         sclera(lx, y, 4 * s, 4.5 * s),
         pupil(lx, y, 2.2 * s, ink),
         glint(lx + 1, y - 1),
-        arc(rx - 4, y, rx, y - 3.5, rx + 4, y, ink, 1.8)
+        arc(rx - 4, y, rx, y - 3.5, rx + 4, y, ink, 1.8 * sw)
       ].join("");
     case "sleepy":
       return [
         // Heavier upper lid — half-closed
-        `<path d="M${lx - 4} ${y - 0.5} Q${lx} ${y + 2} ${lx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="1.7" stroke-linecap="round" fill="none" />`,
-        `<path d="M${rx - 4} ${y - 0.5} Q${rx} ${y + 2} ${rx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="1.7" stroke-linecap="round" fill="none" />`,
+        `<path d="M${lx - 4} ${y - 0.5} Q${lx} ${y + 2} ${lx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="${1.7 * sw}" stroke-linecap="round" fill="none" />`,
+        `<path d="M${rx - 4} ${y - 0.5} Q${rx} ${y + 2} ${rx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="${1.7 * sw}" stroke-linecap="round" fill="none" />`,
         // tiny visible pupils
-        `<circle cx="${lx}" cy="${y + 0.5}" r="0.9" fill="${ink}" />`,
-        `<circle cx="${rx}" cy="${y + 0.5}" r="0.9" fill="${ink}" />`
+        `<circle cx="${lx}" cy="${y + 0.5}" r="${0.9 * sw}" fill="${ink}" />`,
+        `<circle cx="${rx}" cy="${y + 0.5}" r="${0.9 * sw}" fill="${ink}" />`
       ].join("");
     case "star":
       return [starEye(lx, y, ink), starEye(rx, y, ink)].join("");
@@ -250,20 +330,20 @@ function renderEyes(id, palette, anchor) {
       ].join("");
     case "dot":
       return [
-        `<circle cx="${lx}" cy="${y}" r="${1.4 * s}" fill="${ink}" />`,
-        `<circle cx="${rx}" cy="${y}" r="${1.4 * s}" fill="${ink}" />`
+        `<circle cx="${lx}" cy="${y}" r="${1.4 * s * sw}" fill="${ink}" />`,
+        `<circle cx="${rx}" cy="${y}" r="${1.4 * s * sw}" fill="${ink}" />`
       ].join("");
     case "cross":
-      return [crossEye(lx, y, ink), crossEye(rx, y, ink)].join("");
+      return [crossEye(lx, y, ink, sw), crossEye(rx, y, ink, sw)].join("");
   }
 }
 function heartEye(cx, cy, color) {
   const s = 2;
   return `<path d="M${cx} ${cy + s * 1.4} L${cx - s * 1.8} ${cy - s * 0.2} A${s} ${s} 0 0 1 ${cx} ${cy - s * 0.6} A${s} ${s} 0 0 1 ${cx + s * 1.8} ${cy - s * 0.2} Z" fill="${color}" />`;
 }
-function crossEye(cx, cy, color) {
+function crossEye(cx, cy, color, sw = 1) {
   const s = 2.4;
-  return `<g stroke="${color}" stroke-width="1.6" stroke-linecap="round"><line x1="${cx - s}" y1="${cy - s}" x2="${cx + s}" y2="${cy + s}" /><line x1="${cx - s}" y1="${cy + s}" x2="${cx + s}" y2="${cy - s}" /></g>`;
+  return `<g stroke="${color}" stroke-width="${1.6 * sw}" stroke-linecap="round"><line x1="${cx - s}" y1="${cy - s}" x2="${cx + s}" y2="${cy + s}" /><line x1="${cx - s}" y1="${cy + s}" x2="${cx + s}" y2="${cy - s}" /></g>`;
 }
 function sclera(cx, cy, rx, ry) {
   return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#FFFFFF" />`;
@@ -283,41 +363,68 @@ function starEye(cx, cy, color) {
 }
 
 // src/parts/mouth.ts
-function renderMouth(id, palette, anchor, curveScale = 1) {
+function renderMouth(id, palette, anchor, curveScale = 1, opts) {
   const cx = anchor.cx;
   const y = anchor.mouthY;
   const w = anchor.mouthSpan * curveScale;
   const ink = palette.ink;
+  const sw = opts?.strokeMul ?? 1;
+  const base = 1.8 * sw;
   switch (id) {
     case "smile":
-      return `<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
+      return `<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`;
     case "grin":
-      return `<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 7} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
+      return `<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 7} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`;
     case "open":
       return [
-        `<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 9} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="${ink}" fill-opacity="0.55" />`,
+        `<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 9} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="${ink}" fill-opacity="0.55" />`,
         `<ellipse cx="${cx}" cy="${y + 3}" rx="${w * 0.55}" ry="1.8" fill="#F472B6" opacity="0.75" />`
       ].join("");
     case "flat":
-      return `<path d="M${cx - w + 1} ${y} L${cx + w - 1} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
+      return `<path d="M${cx - w + 1} ${y} L${cx + w - 1} ${y}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`;
     case "smirk":
-      return `<path d="M${cx - w} ${y} Q${cx} ${y + 3} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
+      return `<path d="M${cx - w} ${y} Q${cx} ${y + 3} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`;
     case "awe":
       return `<ellipse cx="${cx}" cy="${y + 1}" rx="${w * 0.45}" ry="3.2" fill="${ink}" opacity="0.85" />`;
     case "tongue":
       return [
-        `<path d="M${cx - w} ${y} Q${cx} ${y + 6} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`,
-        `<path d="M${cx - 2} ${y + 4} Q${cx} ${y + 9} ${cx + 2} ${y + 4} Z" fill="#F472B6" stroke="${ink}" stroke-width="0.6" />`
+        `<path d="M${cx - w} ${y} Q${cx} ${y + 6} ${cx + w} ${y}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`,
+        `<path d="M${cx - 2} ${y + 4} Q${cx} ${y + 9} ${cx + 2} ${y + 4} Z" fill="#F472B6" stroke="${ink}" stroke-width="${0.6 * sw}" />`
       ].join("");
     case "tooth":
       return [
-        `<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`,
-        `<rect x="${cx - 1.2}" y="${y + 0.4}" width="2.4" height="2.6" rx="0.4" fill="#FFFFFF" stroke="${ink}" stroke-width="0.4" />`
+        `<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`,
+        `<rect x="${cx - 1.2}" y="${y + 0.4}" width="2.4" height="2.6" rx="0.4" fill="#FFFFFF" stroke="${ink}" stroke-width="${0.4 * sw}" />`
       ].join("");
     case "wave":
-      return `<path d="M${cx - w} ${y + 1} Q${cx - w / 2} ${y - 1.5} ${cx} ${y + 1} Q${cx + w / 2} ${y + 3.5} ${cx + w} ${y + 1}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
+      return `<path d="M${cx - w} ${y + 1} Q${cx - w / 2} ${y - 1.5} ${cx} ${y + 1} Q${cx + w / 2} ${y + 3.5} ${cx + w} ${y + 1}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`;
     case "dot":
-      return `<circle cx="${cx}" cy="${y + 1}" r="1.2" fill="${ink}" />`;
+      return `<circle cx="${cx}" cy="${y + 1}" r="${1.2 * sw}" fill="${ink}" />`;
+    case "jagged": {
+      const half = w + 1;
+      const top = y - 1;
+      const bot = y + 5;
+      const step = half * 2 / 8;
+      const x0 = cx - half;
+      const points = [];
+      points.push(`${x0} ${top}`);
+      for (let i = 1; i <= 8; i++) {
+        const px = x0 + step * i;
+        const py = i % 2 === 1 ? bot : top;
+        points.push(`${px.toFixed(2)} ${py}`);
+      }
+      return `<path d="M${points.join(" L")} L${cx + half} ${top} Z" fill="${ink}" />`;
+    }
+    case "fangs": {
+      const half = w - 1;
+      return [
+        `<path d="M${cx - half} ${y} L${cx + half} ${y}" stroke="${ink}" stroke-width="${base}" stroke-linecap="round" fill="none" />`,
+        // Left fang
+        `<path d="M${cx - 2.5} ${y + 0.4} L${cx - 1.2} ${y + 4.5} L${cx - 0.2} ${y + 0.4} Z" fill="#FFFFFF" stroke="${ink}" stroke-width="${0.5 * sw}" />`,
+        // Right fang
+        `<path d="M${cx + 0.2} ${y + 0.4} L${cx + 1.2} ${y + 4.5} L${cx + 2.5} ${y + 0.4} Z" fill="#FFFFFF" stroke="${ink}" stroke-width="${0.5 * sw}" />`
+      ].join("");
+    }
   }
 }
 
@@ -354,7 +461,8 @@ function renderAntenna(id, anchor, palette) {
 }
 
 // src/parts/accessory.ts
-function renderAccessory(id, palette, anchor) {
+function renderAccessory(id, palette, anchor, opts) {
+  const sw = opts?.strokeMul ?? 1;
   switch (id) {
     case "none":
       return "";
@@ -389,10 +497,11 @@ function renderAccessory(id, palette, anchor) {
       const rx = anchor.cx + anchor.eyeOffset;
       const y = anchor.eyeY;
       const r = 6;
+      const gw = 1.2 * sw;
       return [
-        `<circle cx="${lx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="1.2" />`,
-        `<circle cx="${rx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="1.2" />`,
-        `<line x1="${lx + r}" y1="${y}" x2="${rx - r}" y2="${y}" stroke="${palette.ink}" stroke-width="1.2" />`,
+        `<circle cx="${lx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="${gw}" />`,
+        `<circle cx="${rx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="${gw}" />`,
+        `<line x1="${lx + r}" y1="${y}" x2="${rx - r}" y2="${y}" stroke="${palette.ink}" stroke-width="${gw}" />`,
         // subtle lens fill
         `<circle cx="${lx}" cy="${y}" r="${r - 1}" fill="#FFFFFF" opacity="0.18" />`,
         `<circle cx="${rx}" cy="${y}" r="${r - 1}" fill="#FFFFFF" opacity="0.18" />`
@@ -410,6 +519,20 @@ function renderAccessory(id, palette, anchor) {
     case "mole": {
       return `<circle cx="${anchor.cx - anchor.cheekOffset * 0.6}" cy="${anchor.cheekY + 2}" r="0.9" fill="${palette.ink}" />`;
     }
+    case "earring": {
+      const ex = anchor.cheekOffset + 4;
+      const ey = anchor.cheekY + 4;
+      const lx = anchor.cx - ex;
+      const rx = anchor.cx + ex;
+      return [
+        // Left earring — small stud + drop
+        `<circle cx="${lx}" cy="${ey}" r="${1.1 * sw}" fill="${palette.accent}" stroke="${palette.ink}" stroke-width="${0.4 * sw}" />`,
+        `<ellipse cx="${lx}" cy="${ey + 3.2}" rx="${1.3 * sw}" ry="${2 * sw}" fill="${palette.accent}" stroke="${palette.ink}" stroke-width="${0.4 * sw}" />`,
+        // Right earring
+        `<circle cx="${rx}" cy="${ey}" r="${1.1 * sw}" fill="${palette.accent}" stroke="${palette.ink}" stroke-width="${0.4 * sw}" />`,
+        `<ellipse cx="${rx}" cy="${ey + 3.2}" rx="${1.3 * sw}" ry="${2 * sw}" fill="${palette.accent}" stroke="${palette.ink}" stroke-width="${0.4 * sw}" />`
+      ].join("");
+    }
   }
   function dot(cx, cy, color) {
     return `<circle cx="${cx}" cy="${cy}" r="0.85" fill="${color}" opacity="0.55" />`;
@@ -503,6 +626,84 @@ function renderTopper(id, anchor, palette) {
         `<path d="M${cx - 5} ${topY + 4} L${cx - 6} ${topY - 4} M${cx - 6} ${topY - 4} L${cx - 10} ${topY - 6} M${cx - 6} ${topY - 4} L${cx - 6} ${topY - 9} M${cx - 6} ${topY - 9} L${cx - 8} ${topY - 11} M${cx - 6} ${topY - 9} L${cx - 3} ${topY - 11}" stroke="${ink}" stroke-width="1.3" stroke-linecap="round" fill="none" />`,
         `<path d="M${cx + 5} ${topY + 4} L${cx + 6} ${topY - 4} M${cx + 6} ${topY - 4} L${cx + 10} ${topY - 6} M${cx + 6} ${topY - 4} L${cx + 6} ${topY - 9} M${cx + 6} ${topY - 9} L${cx + 8} ${topY - 11} M${cx + 6} ${topY - 9} L${cx + 3} ${topY - 11}" stroke="${ink}" stroke-width="1.3" stroke-linecap="round" fill="none" />`
       ].join("");
+    case "bob": {
+      const eyeY = anchor.eyeY;
+      const tt = topY - 4;
+      const bt = eyeY + 6;
+      return [
+        // Main hair cap — slightly asymmetric for soft look
+        `<path d="M${cx - 24} ${bt} Q${cx - 26} ${eyeY - 4} ${cx - 22} ${tt + 4} Q${cx - 14} ${tt - 2} ${cx} ${tt - 3} Q${cx + 14} ${tt - 2} ${cx + 22} ${tt + 4} Q${cx + 26} ${eyeY - 4} ${cx + 24} ${bt} Q${cx + 18} ${eyeY + 2} ${cx + 14} ${eyeY - 2} Q${cx} ${eyeY - 8} ${cx - 14} ${eyeY - 2} Q${cx - 18} ${eyeY + 2} ${cx - 24} ${bt} Z" fill="${ink}" opacity="0.92" />`,
+        // Subtle highlight strand
+        `<path d="M${cx - 14} ${tt + 4} Q${cx - 6} ${tt + 2} ${cx + 2} ${tt + 6}" stroke="${palette.accent}" stroke-width="0.6" fill="none" opacity="0.25" />`
+      ].join("");
+    }
+    case "bun": {
+      const baseY = topY + 4;
+      const bunY = topY - 8;
+      return [
+        // Hair base on crown
+        `<path d="M${cx - 16} ${baseY} Q${cx} ${topY - 4} ${cx + 16} ${baseY} Q${cx + 12} ${baseY - 4} ${cx} ${baseY - 6} Q${cx - 12} ${baseY - 4} ${cx - 16} ${baseY} Z" fill="${ink}" opacity="0.92" />`,
+        // Bun disc
+        `<ellipse cx="${cx}" cy="${bunY}" rx="6" ry="5" fill="${ink}" opacity="0.95" />`,
+        // Bun wrap detail
+        `<ellipse cx="${cx}" cy="${bunY - 0.5}" rx="3.5" ry="2.5" fill="none" stroke="${palette.accent}" stroke-width="0.4" opacity="0.4" />`
+      ].join("");
+    }
+    case "witchHat": {
+      const tipY = topY - 26;
+      const baseY = topY + 2;
+      return [
+        // Cone — slight curve, tilts right
+        `<path d="M${cx - 14} ${baseY} Q${cx - 4} ${baseY - 10} ${cx + 4} ${tipY} Q${cx + 2} ${baseY - 4} ${cx + 14} ${baseY} Z" fill="${ink}" opacity="0.96" />`,
+        // Brim — wide flat oval w/ slight curve
+        `<ellipse cx="${cx}" cy="${baseY + 2}" rx="22" ry="3.4" fill="${ink}" opacity="0.96" />`,
+        // Band across cone base
+        `<rect x="${cx - 14}" y="${baseY - 4}" width="28" height="3" fill="${palette.accent}" opacity="0.85" />`,
+        // Buckle
+        `<rect x="${cx - 2}" y="${baseY - 4}" width="4" height="3" fill="${palette.bodyFrom}" stroke="${ink}" stroke-width="0.4" />`,
+        // Star/moon sparkle near tip
+        `<circle cx="${cx + 2}" cy="${tipY + 6}" r="0.9" fill="${palette.accent}" opacity="0.9" />`
+      ].join("");
+    }
+    case "pumpkinStem": {
+      return [
+        // Main stem — slightly curved
+        `<path d="M${cx - 2} ${topY + 4} Q${cx} ${topY - 2} ${cx + 1} ${topY - 8} L${cx + 3} ${topY - 8} Q${cx + 4} ${topY} ${cx + 2} ${topY + 4} Z" fill="#3F6F2C" stroke="${ink}" stroke-width="0.5" />`,
+        // Leaf curling off
+        `<path d="M${cx + 3} ${topY - 4} Q${cx + 9} ${topY - 8} ${cx + 12} ${topY - 4} Q${cx + 8} ${topY - 2} ${cx + 3} ${topY - 2} Z" fill="#4A8035" stroke="${ink}" stroke-width="0.4" />`,
+        // Vein on leaf
+        `<path d="M${cx + 5} ${topY - 3} L${cx + 11} ${topY - 5}" stroke="#2D5020" stroke-width="0.4" />`
+      ].join("");
+    }
+    case "ghostSheet": {
+      return [
+        // Sheet cap — wider than body, hangs lower at sides
+        `<path d="M${cx - 22} ${topY + 8} Q${cx - 26} ${topY - 4} ${cx - 14} ${topY - 10} Q${cx} ${topY - 14} ${cx + 14} ${topY - 10} Q${cx + 26} ${topY - 4} ${cx + 22} ${topY + 8} Q${cx + 12} ${topY + 4} ${cx} ${topY + 6} Q${cx - 12} ${topY + 4} ${cx - 22} ${topY + 8} Z" fill="${palette.accent}" stroke="${ink}" stroke-width="0.6" opacity="0.9" />`,
+        // Fold shadows
+        `<path d="M${cx - 12} ${topY - 6} Q${cx - 10} ${topY - 2} ${cx - 14} ${topY + 4}" stroke="${ink}" stroke-width="0.45" fill="none" opacity="0.35" />`,
+        `<path d="M${cx + 12} ${topY - 6} Q${cx + 10} ${topY - 2} ${cx + 14} ${topY + 4}" stroke="${ink}" stroke-width="0.45" fill="none" opacity="0.35" />`
+      ].join("");
+    }
+    case "ponytail": {
+      const eyeY = anchor.eyeY;
+      const fh = eyeY - 7;
+      const crownY = topY;
+      const baseX = cx + 18;
+      const baseY = crownY + 6;
+      return [
+        // Sleek hair cap — narrower than bob, hugs the crown, soft hairline.
+        `<path d="M${cx - 22} ${fh} Q${cx - 24} ${crownY - 2} ${cx - 12} ${crownY - 4} L${cx + 14} ${crownY - 4} Q${cx + 24} ${crownY} ${cx + 22} ${fh} Q${cx + 10} ${fh - 1} ${cx} ${fh + 2} Q${cx - 10} ${fh - 1} ${cx - 22} ${fh} Z" fill="${ink}" opacity="0.94" />`,
+        // Subtle highlight sweeping back toward the tie
+        `<path d="M${cx - 12} ${crownY - 2} Q${cx} ${crownY - 3} ${baseX - 2} ${baseY - 2}" stroke="${palette.accent}" stroke-width="0.5" fill="none" opacity="0.3" />`,
+        // Ponytail tie — small ring where the hair gathers
+        `<ellipse cx="${baseX}" cy="${baseY}" rx="3" ry="2.4" fill="${ink}" opacity="0.95" />`,
+        `<ellipse cx="${baseX}" cy="${baseY}" rx="1.4" ry="1.1" fill="${palette.accent}" opacity="0.32" />`,
+        // Tail — long tapered strand curving down and slightly out
+        `<path d="M${baseX - 1} ${baseY + 2} Q${baseX + 5} ${baseY + 10} ${baseX + 8} ${baseY + 20} Q${baseX + 9} ${baseY + 28} ${baseX + 4} ${baseY + 30} Q${baseX + 1} ${baseY + 22} ${baseX - 3} ${baseY + 12} Z" fill="${ink}" opacity="0.92" />`,
+        // Inner highlight following the tail's flow direction
+        `<path d="M${baseX + 2} ${baseY + 6} Q${baseX + 5} ${baseY + 16} ${baseX + 6} ${baseY + 24}" stroke="${palette.accent}" stroke-width="0.5" fill="none" opacity="0.25" />`
+      ].join("");
+    }
   }
 }
 
@@ -573,6 +774,20 @@ function renderOutfit(id, anchor, palette) {
         `<circle cx="${cx}" cy="${cy + 7}" r="1.6" fill="${accent}" stroke="${ink}" stroke-width="0.5" />`,
         `<circle cx="${cx}" cy="${cy + 7}" r="0.7" fill="${palette.blush}" />`
       ].join("");
+    case "tie": {
+      const knotTop = cy - 3;
+      const knotBot = cy + 1;
+      return [
+        // Shirt-collar peek behind the tie (so tie reads as worn over a shirt)
+        `<path d="M${cx - 11} ${cy - 2} L${cx - 3} ${knotBot} L${cx + 3} ${knotBot} L${cx + 11} ${cy - 2} L${cx + 6} ${cy + 6} L${cx - 6} ${cy + 6} Z" fill="${accent}" stroke="${ink}" stroke-width="0.55" />`,
+        // Knot — small trapezoid centered
+        `<path d="M${cx - 3.2} ${knotTop} L${cx + 3.2} ${knotTop} L${cx + 2.4} ${knotBot} L${cx - 2.4} ${knotBot} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.5" />`,
+        // Blade — narrower at top, widens, then pointed tip at bottom
+        `<path d="M${cx - 2.4} ${knotBot} L${cx + 2.4} ${knotBot} L${cx + 3.4} ${cy + 6} L${cx + 2.8} ${cy + 12} L${cx} ${cy + 15} L${cx - 2.8} ${cy + 12} L${cx - 3.4} ${cy + 6} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.5" />`,
+        // Subtle highlight stripe down the blade
+        `<path d="M${cx} ${knotBot + 0.5} L${cx} ${cy + 13.5}" stroke="${ink}" stroke-width="0.35" opacity="0.35" />`
+      ].join("");
+    }
   }
 }
 
@@ -586,6 +801,9 @@ var BODY_IDS = [
   "dumpling",
   "taro",
   "wisp"
+  // NOTE: 'squircle' is intentionally NOT in the base pool — pack-only body so
+  // existing seeds keep their original picks (no determinism shift). Packs can
+  // opt-in via `picks.body: ['squircle']`.
 ];
 var EYE_IDS = [
   "round",
@@ -647,7 +865,8 @@ var OUTFIT_IDS = [
   "scarf",
   "bowtie",
   "sunflower",
-  "necklace"
+  "necklace",
+  "tie"
 ];
 
 export { ACCESSORY_IDS, ANCHORS, ANTENNA_IDS, BACKGROUND_IDS, BODY_IDS, EYE_IDS, MOUTH_IDS, OUTFIT_IDS, PALETTES, PALETTE_BY_ID, TOPPER_IDS, bodyAnchor, renderAccessory, renderAntenna, renderBackground, renderBody, renderBodyDefs, renderEyes, renderMouth, renderOutfit, renderTopper };