solfaces 1.0.2 → 2.0.0

package/dist/react/index.js

@@ -1,37 +1,110 @@
-import { generateTraits, SKIN_COLORS, EYE_COLORS, HAIR_COLORS, BG_COLORS } from '../chunk-WURY4QGH.js';
+import { generateTraits, SKIN_COLORS, EYE_COLORS, HAIR_COLORS, BG_COLORS, deriveSkinColors, blend, effectiveAccessory, renderSolFaceSVG, lighten, darken, buzzOpacity } from '../chunk-HCEE4K4T.js';
 import { useMemo } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function renderFace(traits, skin) {
-  switch (traits.faceShape) {
+function djb2(str) {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+  }
+  return hash >>> 0;
+}
+function HairBack({ hi, id, flat }) {
+  const fill = flat ? "currentColor" : `url(#${id}hg)`;
+  switch (hi) {
+    case 5:
+      return /* @__PURE__ */ jsx("rect", { x: "10", y: "14", width: "44", height: "42", rx: "6", fill });
+    case 6:
+      return /* @__PURE__ */ jsx("rect", { x: "12", y: "14", width: "40", height: "32", rx: "8", fill });
+    case 8:
+      return /* @__PURE__ */ jsx("rect", { x: "11", y: "14", width: "42", height: "38", rx: "8", fill });
+    default:
+      return null;
+  }
+}
+function Ears({ earFill, earShadow }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "11", cy: "34", rx: "4", ry: "5", fill: earFill }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "11", cy: "34", rx: "2.5", ry: "3.5", fill: earShadow, opacity: "0.3" }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "53", cy: "34", rx: "4", ry: "5", fill: earFill }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "53", cy: "34", rx: "2.5", ry: "3.5", fill: earShadow, opacity: "0.3" })
+  ] });
+}
+function FaceOverlays({ id }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "16", width: "36", height: "38", rx: "12", ry: "12", fill: `url(#${id}glow)` }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "16", width: "36", height: "38", rx: "12", ry: "12", fill: `url(#${id}chin)` }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "22", cy: "42", rx: "5", ry: "3.5", fill: `url(#${id}cL)` }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "42", cy: "42", rx: "5", ry: "3.5", fill: `url(#${id}cR)` }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "50", x2: "44", y2: "50", stroke: "currentColor", strokeWidth: "0.3", opacity: "0.08", strokeLinecap: "round" })
+  ] });
+}
+function HairFront({ hi, id, hairCol, skin, flat }) {
+  const fill = flat ? hairCol : `url(#${id}hg)`;
+  switch (hi) {
     case 0:
-      return /* @__PURE__ */ jsx("circle", { cx: "32", cy: "34", r: "20", fill: skin });
+      return null;
     case 1:
-      return /* @__PURE__ */ jsx("rect", { x: "12", y: "14", width: "40", height: "40", rx: "8", ry: "8", fill: skin });
+      return /* @__PURE__ */ jsx("path", { d: "M14 28 Q14 14 32 12 Q50 14 50 28 L50 22 Q50 12 32 10 Q14 12 14 22 Z", fill });
     case 2:
-      return /* @__PURE__ */ jsx("ellipse", { cx: "32", cy: "34", rx: "18", ry: "22", fill: skin });
+      return /* @__PURE__ */ jsxs("g", { fill, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "14", r: "5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "28", cy: "11", r: "5.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "36", cy: "11", r: "5.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "44", cy: "14", r: "5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "20", r: "4" }),
+        /* @__PURE__ */ jsx("circle", { cx: "48", cy: "20", r: "4" })
+      ] });
     case 3:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M32 12 L50 24 L50 44 L32 56 L14 44 L14 24 Z",
-          fill: skin,
-          strokeLinejoin: "round"
-        }
-      );
+      return /* @__PURE__ */ jsxs("g", { fill, children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 26 Q14 12 32 10 Q50 12 50 26 L50 20 Q50 10 32 8 Q14 10 14 20 Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 20 Q8 16 10 8 Q14 10 20 16 Z" })
+      ] });
+    case 4:
+      return /* @__PURE__ */ jsx("ellipse", { cx: "32", cy: "10", rx: "14", ry: "8", fill });
+    case 5:
+      return /* @__PURE__ */ jsx("path", { d: "M14 28 Q14 12 32 10 Q50 12 50 28 L50 20 Q50 10 32 8 Q14 10 14 20 Z", fill });
+    case 6:
+      return /* @__PURE__ */ jsxs("g", { fill, children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 28 Q14 12 32 10 Q50 12 50 28 L50 20 Q50 10 32 8 Q14 10 14 20 Z" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "28", width: "8", height: "14", rx: "4" }),
+        /* @__PURE__ */ jsx("rect", { x: "46", y: "28", width: "8", height: "14", rx: "4" })
+      ] });
+    case 7: {
+      const bOp = buzzOpacity(hairCol, skin);
+      return /* @__PURE__ */ jsx("rect", { x: "15", y: "13", width: "34", height: "16", rx: "10", ry: "8", fill: hairCol, opacity: bOp });
+    }
+    case 8:
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 28 Q14 12 32 10 Q50 12 50 28 L50 20 Q50 10 32 8 Q14 10 14 20 Z", fill }),
+        /* @__PURE__ */ jsx("path", { d: "M12 30 Q10 20 14 16", fill: "none", stroke: fill, strokeWidth: "4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M52 30 Q54 20 50 16", fill: "none", stroke: fill, strokeWidth: "4", strokeLinecap: "round" })
+      ] });
+    case 9:
+      return /* @__PURE__ */ jsxs("g", { fill, children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 28 Q14 14 32 12 Q50 14 50 28 L50 22 Q50 12 32 10 Q14 12 14 22 Z" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: "32", cy: "6", rx: "6", ry: "5" })
+      ] });
     default:
-      return /* @__PURE__ */ jsx("circle", { cx: "32", cy: "34", r: "20", fill: skin });
+      return null;
   }
 }
-function renderEyes(traits, eyeCol, eyeWhite = "white") {
-  const lx = 24, rx = 40, y = 30;
-  switch (traits.eyeStyle) {
+function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
+  const lx = 25, rx = 39, y = 33;
+  const lids = full && ei !== 1 && ei !== 5 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: `M${lx - 4} ${y - 1.5} Q${lx} ${y - 4} ${lx + 4} ${y - 1.5}`, fill: "none", stroke: lidColor, strokeWidth: "0.5", opacity: "0.4" }),
+    /* @__PURE__ */ jsx("path", { d: `M${rx - 4} ${y - 1.5} Q${rx} ${y - 4} ${rx + 4} ${y - 1.5}`, fill: "none", stroke: lidColor, strokeWidth: "0.5", opacity: "0.4" })
+  ] }) : null;
+  switch (ei) {
     case 0:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: lx + 1, cy: y, r: "2", fill: eyeCol }),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx + 1, cy: y, r: "2", fill: eyeCol })
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "4", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: lx + 0.8, cy: y, r: "2.2", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: lx + 1.5, cy: y - 1, r: "0.7", fill: "white", opacity: "0.8" }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "4", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx + 0.8, cy: y, r: "2.2", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: rx + 1.5, cy: y - 1, r: "0.7", fill: "white", opacity: "0.8" }),
+        lids
       ] });
     case 1:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -40,420 +113,328 @@ function renderEyes(traits, eyeCol, eyeWhite = "white") {
       ] });
     case 2:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y, rx: "4", ry: "2.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: lx + 0.5, cy: y, r: "1.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y, rx: "4", ry: "2.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx + 0.5, cy: y, r: "1.5", fill: eyeCol })
+        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y, rx: "4.5", ry: "2.8", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: lx + 0.5, cy: y, r: "1.8", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: lx + 1.2, cy: y - 0.8, r: "0.6", fill: "white", opacity: "0.7" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y, rx: "4.5", ry: "2.8", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx + 0.5, cy: y, r: "1.8", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: rx + 1.2, cy: y - 0.8, r: "0.6", fill: "white", opacity: "0.7" }),
+        lids
       ] });
     case 3:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "4.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y + 0.5, r: "2.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "4.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y + 0.5, r: "2.5", fill: eyeCol })
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y + 0.5, r: "2.8", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: lx + 1.5, cy: y - 1, r: "0.8", fill: "white", opacity: "0.8" }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y + 0.5, r: "2.8", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: rx + 1.5, cy: y - 1, r: "0.8", fill: "white", opacity: "0.8" }),
+        lids
       ] });
     case 4:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y + 1, rx: "3.5", ry: "2", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y + 1, rx: "4", ry: "2.2", fill: eyeWhite }),
         /* @__PURE__ */ jsx("circle", { cx: lx, cy: y + 1, r: "1.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx - 4,
-            y1: y - 0.5,
-            x2: lx + 4,
-            y2: y - 0.5,
-            stroke: eyeCol,
-            strokeWidth: "1",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y + 1, rx: "3.5", ry: "2", fill: eyeWhite }),
+        full && /* @__PURE__ */ jsx("line", { x1: lx - 4.5, y1: y - 0.5, x2: lx + 4.5, y2: y - 0.5, stroke: lidColor, strokeWidth: "0.8", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y + 1, rx: "4", ry: "2.2", fill: eyeWhite }),
         /* @__PURE__ */ jsx("circle", { cx: rx, cy: y + 1, r: "1.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx - 4,
-            y1: y - 0.5,
-            x2: rx + 4,
-            y2: y - 0.5,
-            stroke: eyeCol,
-            strokeWidth: "1",
-            strokeLinecap: "round"
-          }
-        )
+        full && /* @__PURE__ */ jsx("line", { x1: rx - 4.5, y1: y - 0.5, x2: rx + 4.5, y2: y - 0.5, stroke: lidColor, strokeWidth: "0.8", strokeLinecap: "round" }),
+        lids
       ] });
     case 5:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M${lx - 3} ${y} Q${lx} ${y + 3} ${lx + 3} ${y}`,
-            fill: "none",
-            stroke: eyeCol,
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3.5", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx + 1, cy: y, r: "2", fill: eyeCol })
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 4} ${y} Q${lx} ${y + 4} ${lx + 4} ${y}`, fill: "none", stroke: eyeCol, strokeWidth: "1.8", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 4} ${y} Q${rx} ${y + 4} ${rx + 4} ${y}`, fill: "none", stroke: eyeCol, strokeWidth: "1.8", strokeLinecap: "round" })
       ] });
     case 6:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: lx + 0.5, cy: y, r: "1.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx + 2,
-            y1: y - 3,
-            x2: lx + 3.5,
-            y2: y - 4.5,
-            stroke: eyeCol,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx + 3,
-            y1: y - 2,
-            x2: lx + 4.5,
-            y2: y - 3,
-            stroke: eyeCol,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx + 0.5, cy: y, r: "1.5", fill: eyeCol }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx + 2,
-            y1: y - 3,
-            x2: rx + 3.5,
-            y2: y - 4.5,
-            stroke: eyeCol,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx + 3,
-            y1: y - 2,
-            x2: rx + 4.5,
-            y2: y - 3,
-            stroke: eyeCol,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: lx + 0.5, cy: y, r: "2", fill: eyeCol }),
+        /* @__PURE__ */ jsx("circle", { cx: lx + 1.5, cy: y - 1, r: "1", fill: "white", opacity: "0.9" }),
+        full && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("line", { x1: lx + 2.5, y1: y - 3.5, x2: lx + 4, y2: y - 5, stroke: eyeCol, strokeWidth: "0.8", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("line", { x1: lx + 3.5, y1: y - 2.5, x2: lx + 5, y2: y - 3.5, stroke: eyeCol, strokeWidth: "0.8", strokeLinecap: "round" })
+        ] }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx + 0.5, cy: y, r: "2", fill: eyeCol }),
+        /* @__PURE__ */ jsx("circle", { cx: rx + 1.5, cy: y - 1, r: "1", fill: "white", opacity: "0.9" }),
+        full && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("line", { x1: rx + 2.5, y1: y - 3.5, x2: rx + 4, y2: y - 5, stroke: eyeCol, strokeWidth: "0.8", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("line", { x1: rx + 3.5, y1: y - 2.5, x2: rx + 5, y2: y - 3.5, stroke: eyeCol, strokeWidth: "0.8", strokeLinecap: "round" })
+        ] }),
+        lids
       ] });
     case 7:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y, rx: "4", ry: "1.2", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("ellipse", { cx: lx + 0.5, cy: y, rx: "2", ry: "1", fill: eyeCol }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y, rx: "4", ry: "1.2", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx + 0.5, cy: y, rx: "2", ry: "1", fill: eyeCol })
+        /* @__PURE__ */ jsx("ellipse", { cx: lx, cy: y, rx: "4.5", ry: "1.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("ellipse", { cx: lx + 0.5, cy: y, rx: "2.2", ry: "1.2", fill: eyeCol }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: y, rx: "4.5", ry: "1.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx + 0.5, cy: y, rx: "2.2", ry: "1.2", fill: eyeCol }),
+        lids
       ] });
     default:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: lx + 1, cy: y, r: "2", fill: eyeCol }),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3", fill: eyeWhite }),
-        /* @__PURE__ */ jsx("circle", { cx: rx + 1, cy: y, r: "2", fill: eyeCol })
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: lx + 0.8, cy: y, r: "2", fill: eyeCol }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx + 0.8, cy: y, r: "2", fill: eyeCol }),
+        lids
       ] });
   }
 }
-function renderEyebrows(traits, col) {
-  const lx = 24, rx = 40, y = 25;
-  switch (traits.eyebrows) {
+function Eyebrows({ bi, browColor }) {
+  const lx = 25, rx = 39, y = 27;
+  switch (bi) {
     case 0:
-      return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("line", { x1: lx - 3, y1: y, x2: lx + 3, y2: y - 0.5, stroke: browColor, strokeWidth: "0.7", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: rx - 3, y1: y - 0.5, x2: rx + 3, y2: y, stroke: browColor, strokeWidth: "0.7", strokeLinecap: "round" })
+      ] });
     case 1:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx - 3,
-            y1: y,
-            x2: lx + 3,
-            y2: y,
-            stroke: col,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx - 3,
-            y1: y,
-            x2: rx + 3,
-            y2: y,
-            stroke: col,
-            strokeWidth: "0.8",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsx("line", { x1: lx - 3.5, y1: y, x2: lx + 3.5, y2: y, stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: rx - 3.5, y1: y, x2: rx + 3.5, y2: y, stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round" })
       ] });
     case 2:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx - 3.5,
-            y1: y,
-            x2: lx + 3.5,
-            y2: y,
-            stroke: col,
-            strokeWidth: "2",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx - 3.5,
-            y1: y,
-            x2: rx + 3.5,
-            y2: y,
-            stroke: col,
-            strokeWidth: "2",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 3.5} ${y + 0.5} Q${lx} ${y - 1.5} ${lx + 3.5} ${y + 0.5}`, fill: "none", stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 3.5} ${y + 0.5} Q${rx} ${y - 1.5} ${rx + 3.5} ${y + 0.5}`, fill: "none", stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round" })
       ] });
     case 3:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M${lx - 3.5} ${y + 1} Q${lx} ${y - 2} ${lx + 3.5} ${y + 1}`,
-            fill: "none",
-            stroke: col,
-            strokeWidth: "1",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M${rx - 3.5} ${y + 1} Q${rx} ${y - 2} ${rx + 3.5} ${y + 1}`,
-            fill: "none",
-            stroke: col,
-            strokeWidth: "1",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 4} ${y + 1} Q${lx} ${y - 3} ${lx + 4} ${y + 1}`, fill: "none", stroke: browColor, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 4} ${y + 1} Q${rx} ${y - 3} ${rx + 4} ${y + 1}`, fill: "none", stroke: browColor, strokeWidth: "1", strokeLinecap: "round" })
       ] });
     case 4:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: lx - 3,
-            y1: y - 1,
-            x2: lx + 3,
-            y2: y + 1,
-            stroke: col,
-            strokeWidth: "1.2",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: rx - 3,
-            y1: y + 1,
-            x2: rx + 3,
-            y2: y - 1,
-            stroke: col,
-            strokeWidth: "1.2",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsx("polyline", { points: `${lx - 3},${y + 1} ${lx},${y - 2} ${lx + 3},${y}`, fill: "none", stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("polyline", { points: `${rx - 3},${y} ${rx},${y - 2} ${rx + 3},${y + 1}`, fill: "none", stroke: browColor, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
       ] });
     default:
       return null;
   }
 }
-function renderNose(traits, skin, noseCol) {
-  const cx = 32, y = 36;
-  const shadow = noseCol ?? skin + "aa";
-  switch (traits.nose) {
+function Nose({ ni, noseFill }) {
+  const cx = 32, y = 39;
+  switch (ni) {
     case 0:
-      return null;
+      return /* @__PURE__ */ jsx("ellipse", { cx, cy: y, rx: "2", ry: "1.2", fill: noseFill, opacity: "0.35" });
     case 1:
-      return /* @__PURE__ */ jsx("circle", { cx, cy: y, r: "1.5", fill: shadow });
+      return /* @__PURE__ */ jsx("circle", { cx, cy: y, r: "1.8", fill: noseFill, opacity: "0.5" });
     case 2:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx} ${y - 1.5} L${cx + 2.5} ${y + 2} L${cx - 2.5} ${y + 2} Z`,
-          fill: shadow
-        }
-      );
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 2} ${y + 1} Q${cx} ${y - 2} ${cx + 2} ${y + 1}`, fill: "none", stroke: noseFill, strokeWidth: "1", strokeLinecap: "round", opacity: "0.5" });
     case 3:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: cx - 1.5, cy: y, r: "1", fill: shadow }),
-        /* @__PURE__ */ jsx("circle", { cx: cx + 1.5, cy: y, r: "1", fill: shadow })
+        /* @__PURE__ */ jsx("circle", { cx: cx - 1.8, cy: y, r: "1.2", fill: noseFill, opacity: "0.4" }),
+        /* @__PURE__ */ jsx("circle", { cx: cx + 1.8, cy: y, r: "1.2", fill: noseFill, opacity: "0.4" })
       ] });
     default:
-      return null;
+      return /* @__PURE__ */ jsx("ellipse", { cx, cy: y, rx: "2", ry: "1.2", fill: noseFill, opacity: "0.35" });
   }
 }
-function renderMouth(traits, col, teethCol = "white") {
-  const cx = 32, y = 42;
-  switch (traits.mouth) {
+function Mouth({ mi, lipColor, isDark }) {
+  const cx = 32, y = 45;
+  const teethCol = isDark ? "#e8e0d8" : "#ffffff";
+  switch (mi) {
     case 0:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx - 4} ${y} Q${cx} ${y + 4} ${cx + 4} ${y}`,
-          fill: "none",
-          stroke: col,
-          strokeWidth: "1.2",
-          strokeLinecap: "round"
-        }
-      );
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 4} ${y} Q${cx} ${y + 4} ${cx + 4} ${y}`, fill: "none", stroke: lipColor, strokeWidth: "1.4", strokeLinecap: "round" });
     case 1:
-      return /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: cx - 3,
-          y1: y + 1,
-          x2: cx + 3,
-          y2: y + 1,
-          stroke: col,
-          strokeWidth: "1.2",
-          strokeLinecap: "round"
-        }
-      );
+      return /* @__PURE__ */ jsx("line", { x1: cx - 3, y1: y + 1, x2: cx + 3, y2: y + 1, stroke: lipColor, strokeWidth: "1.2", strokeLinecap: "round" });
     case 2:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx - 6} ${y} Q${cx} ${y + 5} ${cx + 6} ${y}`,
-          fill: "none",
-          stroke: col,
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      );
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 5} ${y} Q${cx} ${y + 5} ${cx + 5} ${y}`, fill: "none", stroke: lipColor, strokeWidth: "1.5", strokeLinecap: "round" });
     case 3:
-      return /* @__PURE__ */ jsx("ellipse", { cx, cy: y + 1, rx: "3", ry: "2.5", fill: col, opacity: "0.8" });
+      return /* @__PURE__ */ jsx("ellipse", { cx, cy: y + 1, rx: "2.5", ry: "3", fill: lipColor, opacity: "0.7" });
     case 4:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx - 4} ${y + 1} Q${cx - 1} ${y + 1} ${cx + 4} ${y - 1}`,
-          fill: "none",
-          stroke: col,
-          strokeWidth: "1.2",
-          strokeLinecap: "round"
-        }
-      );
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 4} ${y + 1} Q${cx + 1} ${y + 1} ${cx + 4} ${y - 1.5}`, fill: "none", stroke: lipColor, strokeWidth: "1.3", strokeLinecap: "round" });
     case 5:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx - 6} ${y} Q${cx} ${y + 6} ${cx + 6} ${y}`,
-          fill: teethCol,
-          stroke: col,
-          strokeWidth: "1"
-        }
-      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: `M${cx - 5} ${y} Q${cx} ${y + 6} ${cx + 5} ${y}`, fill: teethCol, stroke: lipColor, strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("line", { x1: cx - 4, y1: y + 1.5, x2: cx + 4, y2: y + 1.5, stroke: lipColor, strokeWidth: "0.3", opacity: "0.3" })
+      ] });
+    case 6:
+      return /* @__PURE__ */ jsx("line", { x1: cx - 4, y1: y + 1, x2: cx + 4, y2: y + 1, stroke: lipColor, strokeWidth: "1.5", strokeLinecap: "round" });
+    case 7:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("ellipse", { cx, cy: y + 1, rx: "3.5", ry: "2", fill: lipColor, opacity: "0.25" }),
+        /* @__PURE__ */ jsx("path", { d: `M${cx - 3} ${y} Q${cx} ${y + 2.5} ${cx + 3} ${y}`, fill: "none", stroke: lipColor, strokeWidth: "1.2", strokeLinecap: "round" })
+      ] });
     default:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: `M${cx - 4} ${y} Q${cx} ${y + 4} ${cx + 4} ${y}`,
-          fill: "none",
-          stroke: col,
-          strokeWidth: "1.2",
-          strokeLinecap: "round"
-        }
-      );
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 4} ${y} Q${cx} ${y + 4} ${cx + 4} ${y}`, fill: "none", stroke: lipColor, strokeWidth: "1.4", strokeLinecap: "round" });
   }
 }
-function renderHair(traits, hairCol) {
-  switch (traits.hairStyle) {
+function Accessory({ ai, accColor, glassesColor, earringColor, headbandColor }) {
+  switch (ai) {
     case 0:
       return null;
     case 1:
-      return /* @__PURE__ */ jsx("rect", { x: "14", y: "12", width: "36", height: "12", rx: "6", ry: "6", fill: hairCol });
+      return /* @__PURE__ */ jsx("circle", { cx: "40", cy: "44", r: "0.8", fill: "#3a2a2a" });
     case 2:
-      return /* @__PURE__ */ jsxs("g", { fill: hairCol, children: [
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "16", width: "36", height: "8", rx: "2" }),
-        /* @__PURE__ */ jsx("polygon", { points: "18,16 22,6 26,16" }),
-        /* @__PURE__ */ jsx("polygon", { points: "26,16 30,4 34,16" }),
-        /* @__PURE__ */ jsx("polygon", { points: "34,16 38,6 42,16" }),
-        /* @__PURE__ */ jsx("polygon", { points: "42,16 46,10 48,16" })
+      return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: glassesColor, strokeWidth: "1", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "25", cy: "33", r: "5.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "39", cy: "33", r: "5.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "30.5", y1: "33", x2: "33.5", y2: "33" }),
+        /* @__PURE__ */ jsx("line", { x1: "19.5", y1: "33", x2: "14", y2: "31" }),
+        /* @__PURE__ */ jsx("line", { x1: "44.5", y1: "33", x2: "50", y2: "31" })
       ] });
     case 3:
-      return /* @__PURE__ */ jsxs("g", { fill: hairCol, children: [
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "36", height: "10", rx: "4" }),
-        /* @__PURE__ */ jsx("path", { d: "M14 18 Q8 14 10 8 Q14 10 20 14 Z" })
+      return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: glassesColor, strokeWidth: "1", children: [
+        /* @__PURE__ */ jsx("rect", { x: "19", y: "29", width: "12", height: "8", rx: "1.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "33", y: "29", width: "12", height: "8", rx: "1.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "31", y1: "33", x2: "33", y2: "33" }),
+        /* @__PURE__ */ jsx("line", { x1: "19", y1: "33", x2: "14", y2: "31" }),
+        /* @__PURE__ */ jsx("line", { x1: "45", y1: "33", x2: "50", y2: "31" })
       ] });
     case 4:
-      return /* @__PURE__ */ jsx("rect", { x: "26", y: "4", width: "12", height: "20", rx: "4", ry: "2", fill: hairCol });
-    case 5:
-      return /* @__PURE__ */ jsxs("g", { fill: hairCol, children: [
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "12", width: "36", height: "10", rx: "4" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "18", width: "8", height: "24", rx: "3" }),
-        /* @__PURE__ */ jsx("rect", { x: "46", y: "18", width: "8", height: "24", rx: "3" })
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "38", r: "1.5", fill: earringColor }),
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "41", r: "2", fill: earringColor, opacity: "0.8" })
       ] });
+    case 5:
+      return /* @__PURE__ */ jsx("rect", { x: "13", y: "20", width: "38", height: "3.5", rx: "1.5", fill: headbandColor, opacity: "0.85" });
     case 6:
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 22 Q12 10 32 10 Q52 10 52 22 L52 38 Q52 42 48 42 L48 26 Q48 16 32 16 Q16 16 16 26 L16 42 Q12 42 12 38 Z",
-          fill: hairCol
-        }
-      );
+      return /* @__PURE__ */ jsxs("g", { fill: "#a0785a", opacity: "0.35", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "21", cy: "40", r: "0.6" }),
+        /* @__PURE__ */ jsx("circle", { cx: "23", cy: "42", r: "0.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "41.5", r: "0.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "43", cy: "40", r: "0.6" }),
+        /* @__PURE__ */ jsx("circle", { cx: "41", cy: "42", r: "0.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "45", cy: "41.5", r: "0.5" })
+      ] });
     case 7:
-      return /* @__PURE__ */ jsx("rect", { x: "15", y: "13", width: "34", height: "9", rx: "8", ry: "4", fill: hairCol, opacity: "0.7" });
-    default:
-      return null;
-  }
-}
-function renderAccessory(traits, col) {
-  switch (traits.accessory) {
-    case 0:
-    case 1:
-      return null;
-    case 2:
-      return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: col, strokeWidth: "1", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "30", r: "5" }),
-        /* @__PURE__ */ jsx("circle", { cx: "40", cy: "30", r: "5" }),
-        /* @__PURE__ */ jsx("line", { x1: "29", y1: "30", x2: "35", y2: "30" }),
-        /* @__PURE__ */ jsx("line", { x1: "19", y1: "30", x2: "14", y2: "28" }),
-        /* @__PURE__ */ jsx("line", { x1: "45", y1: "30", x2: "50", y2: "28" })
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "37", r: "1.2", fill: earringColor }),
+        /* @__PURE__ */ jsx("circle", { cx: "54", cy: "37", r: "1.2", fill: earringColor })
       ] });
-    case 3:
-      return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: col, strokeWidth: "1", children: [
-        /* @__PURE__ */ jsx("rect", { x: "19", y: "26", width: "10", height: "8", rx: "1" }),
-        /* @__PURE__ */ jsx("rect", { x: "35", y: "26", width: "10", height: "8", rx: "1" }),
-        /* @__PURE__ */ jsx("line", { x1: "29", y1: "30", x2: "35", y2: "30" }),
-        /* @__PURE__ */ jsx("line", { x1: "19", y1: "30", x2: "14", y2: "28" }),
-        /* @__PURE__ */ jsx("line", { x1: "45", y1: "30", x2: "50", y2: "28" })
+    case 8:
+      return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: glassesColor, strokeWidth: "1.2", children: [
+        /* @__PURE__ */ jsx("path", { d: "M19 30 Q19 28 25 28 Q31 28 31 33 Q31 38 25 38 Q19 38 19 33 Z", fill: glassesColor, fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("path", { d: "M33 30 Q33 28 39 28 Q45 28 45 33 Q45 38 39 38 Q33 38 33 33 Z", fill: glassesColor, fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("line", { x1: "31", y1: "32", x2: "33", y2: "32" }),
+        /* @__PURE__ */ jsx("line", { x1: "19", y1: "31", x2: "14", y2: "29" }),
+        /* @__PURE__ */ jsx("line", { x1: "45", y1: "31", x2: "50", y2: "29" })
       ] });
-    case 4:
-      return /* @__PURE__ */ jsx("circle", { cx: "11", cy: "36", r: "2", fill: col, stroke: col, strokeWidth: "0.5" });
-    case 5:
+    case 9:
       return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("rect", { x: "12", y: "20", width: "40", height: "4", rx: "1", fill: col }),
-        /* @__PURE__ */ jsx("path", { d: "M12 22 L8 26 L12 24 Z", fill: col })
+        /* @__PURE__ */ jsx("rect", { x: "38", y: "38", width: "8", height: "4", rx: "1", fill: "#f0d0a0", transform: "rotate(-15 42 40)" }),
+        /* @__PURE__ */ jsx("line", { x1: "40", y1: "39", x2: "40", y2: "41", stroke: "#c0a080", strokeWidth: "0.4", transform: "rotate(-15 42 40)" }),
+        /* @__PURE__ */ jsx("line", { x1: "42", y1: "39", x2: "42", y2: "41", stroke: "#c0a080", strokeWidth: "0.4", transform: "rotate(-15 42 40)" }),
+        /* @__PURE__ */ jsx("line", { x1: "44", y1: "39", x2: "44", y2: "41", stroke: "#c0a080", strokeWidth: "0.4", transform: "rotate(-15 42 40)" })
       ] });
     default:
       return null;
   }
 }
+function PixelWrapper({ svgString, size, theme }) {
+  const density = theme._pixelDensity ?? 16;
+  const rounded = theme._pixelRounded ?? true;
+  const outline = theme._pixelOutline ?? false;
+  const outlineColor = theme._pixelOutlineColor ?? "#000";
+  const outlineWidth = theme._pixelOutlineWidth ?? 1;
+  const scanlines = theme._pixelScanlines ?? false;
+  const scanlineOpacity = theme._pixelScanlineOpacity ?? 0.08;
+  const scanlineSpacing = theme._pixelScanlineSpacing ?? 2;
+  const grid = theme._pixelGrid ?? false;
+  const gridOpacity = theme._pixelGridOpacity ?? 0.06;
+  const gridColor = theme._pixelGridColor ?? "#000";
+  const shadow = theme._pixelShadow ?? false;
+  const shadowColor = theme._pixelShadowColor ?? "rgba(0,0,0,0.3)";
+  const shadowOffset = theme._pixelShadowOffset ?? 2;
+  const contrast = theme._pixelContrast;
+  const saturation = theme._pixelSaturation;
+  const brightness = theme._pixelBrightness;
+  const dataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+  const filters = [];
+  if (shadow) filters.push(`drop-shadow(${shadowOffset}px ${shadowOffset}px 0px ${shadowColor})`);
+  if (contrast !== void 0) filters.push(`contrast(${contrast})`);
+  if (saturation !== void 0) filters.push(`saturate(${saturation})`);
+  if (brightness !== void 0) filters.push(`brightness(${brightness})`);
+  const containerStyle = {
+    position: "relative",
+    width: size,
+    height: size,
+    display: "inline-block",
+    ...filters.length ? { filter: filters.join(" ") } : {}
+  };
+  const imgStyle = {
+    width: size,
+    height: size,
+    imageRendering: "pixelated",
+    borderRadius: rounded ? "12%" : 0,
+    display: "block",
+    border: outline ? `${outlineWidth}px solid ${outlineColor}` : "none"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx("img", { src: dataUri, width: density, height: density, style: imgStyle, alt: "" }),
+    scanlines && /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: `repeating-linear-gradient(0deg, transparent, transparent ${scanlineSpacing}px, rgba(0,0,0,${scanlineOpacity}) ${scanlineSpacing}px, rgba(0,0,0,${scanlineOpacity}) ${scanlineSpacing + 1}px)`,
+      pointerEvents: "none",
+      borderRadius: rounded ? "12%" : 0
+    } }),
+    grid && /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      backgroundSize: `${size / density}px ${size / density}px`,
+      backgroundImage: `linear-gradient(${gridColor} ${gridOpacity}, transparent ${gridOpacity}), linear-gradient(90deg, ${gridColor} ${gridOpacity}, transparent ${gridOpacity})`,
+      pointerEvents: "none",
+      borderRadius: rounded ? "12%" : 0
+    } })
+  ] });
+}
+function GlassWrapper({ children, size, theme }) {
+  const blurRadius = theme._blurRadius ?? 12;
+  const saturate = theme._saturate ?? 1.8;
+  const tintOpacity = theme._tintOpacity ?? 0.12;
+  const tintColor = theme._tintColor ?? "rgba(255,255,255,1)";
+  const borderOpacity = theme._borderOpacity ?? 0.25;
+  const borderWidth = theme._borderWidth ?? 1;
+  const borderColor = theme._borderColor ?? `rgba(255,255,255,${borderOpacity})`;
+  const specularOpacity = theme._specularOpacity ?? 0.25;
+  const specularColor = theme._specularColor ?? "rgba(255,255,255,1)";
+  const specularEnd = theme._specularEnd ?? 50;
+  const lightAngle = theme._lightAngle ?? 135;
+  const rimIntensity = theme._rimIntensity ?? 0.08;
+  const shadowStr = theme._shadow ?? "0 8px 32px rgba(0,0,0,0.12)";
+  const bgRadius = theme.bgRadius ?? 16;
+  const containerStyle = {
+    position: "relative",
+    width: size,
+    height: size,
+    display: "inline-block",
+    borderRadius: bgRadius,
+    overflow: "hidden",
+    backdropFilter: `blur(${blurRadius}px) saturate(${saturate})`,
+    WebkitBackdropFilter: `blur(${blurRadius}px) saturate(${saturate})`,
+    border: `${borderWidth}px solid ${borderColor}`,
+    boxShadow: shadowStr
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: tintColor,
+      opacity: tintOpacity,
+      borderRadius: bgRadius,
+      pointerEvents: "none"
+    } }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children }),
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: `linear-gradient(${lightAngle}deg, ${specularColor.replace("1)", `${specularOpacity})`)} 0%, transparent ${specularEnd}%)`,
+      borderRadius: bgRadius,
+      pointerEvents: "none"
+    } }),
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: bgRadius,
+      boxShadow: `inset 0 0 0 1px rgba(255,255,255,${rimIntensity})`,
+      pointerEvents: "none"
+    } })
+  ] });
+}
 function SolFace({
   walletAddress,
   size = 64,
@@ -461,6 +442,7 @@ function SolFace({
   theme,
   traitOverrides,
   colorOverrides,
+  detail: detailProp,
   className,
   style,
   ...rest
@@ -469,6 +451,9 @@ function SolFace({
     () => generateTraits(walletAddress, traitOverrides),
     [walletAddress, traitOverrides]
   );
+  const detailOpt = detailProp ?? "auto";
+  const full = detailOpt === "full" || detailOpt === "auto" && size >= 48;
+  const flat = theme?.flat ?? false;
   const skinColors = theme?.skinColors ?? SKIN_COLORS;
   const eyeColors = theme?.eyeColors ?? EYE_COLORS;
   const hairColors = theme?.hairColors ?? HAIR_COLORS;
@@ -477,19 +462,40 @@ function SolFace({
   const eyeCol = colorOverrides?.eyes ?? eyeColors[traits.eyeColor % eyeColors.length];
   const hairCol = colorOverrides?.hair ?? hairColors[traits.hairColor % hairColors.length];
   const bgCol = colorOverrides?.bg ?? bgColors[traits.bgColor % bgColors.length];
-  const bgOpacity = theme?.bgOpacity ?? 0.15;
+  const derived = useMemo(() => deriveSkinColors(skin), [skin]);
+  const bgOpacity = theme?.bgOpacity ?? 1;
   const bgRadius = theme?.bgRadius ?? 4;
-  const mouthCol = colorOverrides?.mouth ?? theme?.mouthColor ?? "#c05050";
-  const browCol = colorOverrides?.eyebrow ?? theme?.eyebrowColor ?? "#2a2020";
-  const accCol = colorOverrides?.accessory ?? theme?.accessoryColor ?? "#444";
-  const eyeWhite = colorOverrides?.eyeWhite ?? theme?.eyeWhiteColor ?? "white";
-  const noseCol = colorOverrides?.nose ?? theme?.noseColor;
-  const uid = useMemo(() => `sf-${walletAddress.slice(0, 8)}`, [walletAddress]);
+  const browColor = colorOverrides?.eyebrow ?? theme?.eyebrowColor ?? derived.browColor;
+  const noseFill = colorOverrides?.nose ?? theme?.noseColor ?? derived.noseFill;
+  const lipColor = colorOverrides?.mouth ?? theme?.mouthColor ?? derived.lipColor;
+  const accColor = colorOverrides?.accessory ?? theme?.accessoryColor ?? derived.accessoryColor;
+  const eyeWhite = colorOverrides?.eyeWhite ?? theme?.eyeWhiteColor ?? derived.eyeWhiteAdapted;
+  const glassesColor = theme?.glassesColor ?? "#4a4a5a";
+  const earringColor = theme?.earringColor ?? blend(skin, "#d4a840", 0.4);
+  const headbandColor = theme?.headbandColor ?? blend(hairCol, "#c04040", 0.5);
+  const id = useMemo(() => "sf" + djb2(walletAddress).toString(36), [walletAddress]);
+  const cheekEnabled = theme?.cheekEnabled ?? true;
+  const cheekColor = theme?.cheekColor ?? derived.cheekColor;
+  const cheekOpacity = theme?.cheekOpacity ?? derived.cheekOpacity;
+  const hi = traits.hairStyle % 10;
+  const ai = effectiveAccessory(traits);
   const blinkEnabled = !!enableBlink;
   const blinkDuration = typeof enableBlink === "object" ? enableBlink.duration ?? 4 : 4;
   const blinkDelay = typeof enableBlink === "object" ? enableBlink.delay ?? 0 : 0;
   const delayStr = blinkDelay ? ` ${blinkDelay}s` : "";
-  return /* @__PURE__ */ jsxs(
+  const bgFill = flat ? bgCol : `url(#${id}bg)`;
+  const skinFill = flat ? skin : `url(#${id}sg)`;
+  if (theme?._pixel) {
+    const pixelSvg = renderSolFaceSVG(walletAddress, {
+      size,
+      theme: { ...theme, _pixel: false, _glass: false },
+      traitOverrides,
+      colorOverrides,
+      detail: detailProp
+    });
+    return /* @__PURE__ */ jsx(PixelWrapper, { svgString: pixelSvg, size, theme });
+  }
+  const svgElement = /* @__PURE__ */ jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -500,40 +506,68 @@ function SolFace({
       style: { display: "block", ...style },
       ...rest,
       children: [
+        !flat && /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}sg`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: derived.skinHi }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: derived.skinLo })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}hg`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: lighten(hairCol, 0.15) }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: darken(hairCol, 0.15) })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}bg`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: lighten(bgCol, 0.12) }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: darken(bgCol, 0.12) })
+          ] }),
+          full && cheekEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${id}glow`, cx: "0.5", cy: "0.28", r: "0.45", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: 0.1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: 0 })
+            ] }),
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${id}chin`, cx: "0.5", cy: "0.85", r: "0.35", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: derived.skinLo, stopOpacity: 0.3 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: derived.skinLo, stopOpacity: 0 })
+            ] }),
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${id}cL`, cx: "0.5", cy: "0.5", r: "0.5", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: cheekColor, stopOpacity: cheekOpacity }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: cheekColor, stopOpacity: 0 })
+            ] }),
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${id}cR`, cx: "0.5", cy: "0.5", r: "0.5", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: cheekColor, stopOpacity: cheekOpacity }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: cheekColor, stopOpacity: 0 })
+            ] })
+          ] })
+        ] }),
         blinkEnabled && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes ${uid}-blink {
+          @keyframes ${id}-blink {
             0%, 90%, 100% { transform: scaleY(1); }
             95% { transform: scaleY(0.1); }
           }
-          .${uid}-eyes {
-            animation: ${uid}-blink ${blinkDuration}s ease-in-out${delayStr} infinite;
-            transform-origin: 32px 30px;
+          .${id}-eyes {
+            animation: ${id}-blink ${blinkDuration}s ease-in-out${delayStr} infinite;
+            transform-origin: 32px 33px;
           }
         ` }),
-        /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "64", height: "64", fill: bgCol, opacity: bgOpacity, rx: bgRadius }),
-        renderHair(traits, hairCol),
-        renderFace(traits, skin),
-        /* @__PURE__ */ jsx("g", { className: blinkEnabled ? `${uid}-eyes` : void 0, children: renderEyes(traits, eyeCol, eyeWhite) }),
-        renderEyebrows(traits, browCol),
-        renderNose(traits, skin, noseCol),
-        renderMouth(traits, mouthCol, eyeWhite),
-        renderAccessory(traits, accCol),
-        theme?.border && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0",
-            y: "0",
-            width: "64",
-            height: "64",
-            fill: "none",
-            stroke: theme.border.color,
-            strokeWidth: theme.border.width,
-            rx: bgRadius
-          }
-        )
+        /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "64", height: "64", fill: bgFill, opacity: bgOpacity, rx: bgRadius }),
+        /* @__PURE__ */ jsx(HairBack, { hi, id, flat }),
+        /* @__PURE__ */ jsx(Ears, { earFill: derived.earFill, earShadow: derived.earShadow }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "16", width: "36", height: "38", rx: "12", ry: "12", fill: skinFill }),
+        full && cheekEnabled && !flat && /* @__PURE__ */ jsx(FaceOverlays, { id }),
+        ai === 5 && /* @__PURE__ */ jsx(Accessory, { ai: 5, accColor, glassesColor, earringColor, headbandColor }),
+        /* @__PURE__ */ jsx(HairFront, { hi, id, hairCol, skin, flat }),
+        /* @__PURE__ */ jsx("g", { className: blinkEnabled ? `${id}-eyes` : void 0, children: /* @__PURE__ */ jsx(Eyes, { ei: traits.eyeStyle % 8, eyeCol, eyeWhite, lidColor: derived.lidColor, full }) }),
+        /* @__PURE__ */ jsx(Eyebrows, { bi: traits.eyebrows % 5, browColor }),
+        /* @__PURE__ */ jsx(Nose, { ni: traits.nose % 4, noseFill }),
+        /* @__PURE__ */ jsx(Mouth, { mi: traits.mouth % 8, lipColor, isDark: derived.isDark }),
+        ai !== 0 && ai !== 5 && /* @__PURE__ */ jsx(Accessory, { ai, accColor, glassesColor, earringColor, headbandColor }),
+        theme?.border && /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "64", height: "64", fill: "none", stroke: theme.border.color, strokeWidth: theme.border.width, rx: bgRadius })
       ]
     }
   );
+  if (theme?._glass) {
+    return /* @__PURE__ */ jsx(GlassWrapper, { size, theme, children: svgElement });
+  }
+  return svgElement;
 }
 
 export { SolFace };