solfaces 2.2.0 → 2.3.1

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { generateTraits, SKIN_COLORS, EYE_COLORS, HAIR_COLORS, BG_COLORS, deriveSkinColors, blend, effectiveAccessory, renderSolFaceSVG, lighten, darken, buzzOpacity } from '../chunk-3CE7Q44S.js';
+import { generateTraits, SKIN_COLORS, EYE_COLORS, HAIR_COLORS, BG_COLORS, deriveSkinColors, blend, effectiveAccessory, renderSolFaceSVG, solFaceAltText, lighten, darken } from '../chunk-N5GDLCCL.js';
 import { deriveName, deriveIdentity } from '../chunk-UTT764K6.js';
 import { useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -10,18 +10,8 @@ function djb2(str) {
   }
   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 HairBack(_props) {
+  return null;
 }
 function Ears({ earFill, earShadow }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -40,55 +30,8 @@ function FaceOverlays({ id }) {
     /* @__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 null;
-    case 1:
-      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__ */ 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__ */ 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 null;
-  }
+function HairFront(_props) {
+  return null;
 }
 function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
   const lx = 25, rx = 39, y = 33;
@@ -109,8 +52,10 @@ function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
       ] });
     case 1:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "2", fill: eyeCol }),
-        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "2", fill: eyeCol })
+        /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "2.2", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: lx + 0.5, cy: y - 0.5, r: "0.5", fill: "white", opacity: "0.4" }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "2.2", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: rx + 0.5, cy: y - 0.5, r: "0.5", fill: "white", opacity: "0.4" })
       ] });
     case 2:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -144,25 +89,17 @@ function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
       ] });
     case 5:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__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" })
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 4} ${y} Q${lx} ${y + 4.5} ${lx + 4} ${y}`, fill: "none", stroke: eyeCol, strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 4} ${y} Q${rx} ${y + 4.5} ${rx + 4} ${y}`, fill: "none", stroke: eyeCol, strokeWidth: "2", strokeLinecap: "round" })
       ] });
     case 6:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__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:
@@ -173,6 +110,16 @@ function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
         /* @__PURE__ */ jsx("ellipse", { cx: rx + 0.5, cy: y, rx: "2.2", ry: "1.2", fill: eyeCol }),
         lids
       ] });
+    case 8:
+      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 }),
+        full && /* @__PURE__ */ jsx("circle", { cx: lx - 0.3, cy: y - 0.8, r: "0.7", fill: "white", opacity: "0.8" }),
+        /* @__PURE__ */ jsx("circle", { cx: rx, cy: y, r: "3.5", fill: eyeWhite }),
+        /* @__PURE__ */ jsx("circle", { cx: rx - 1, cy: y, r: "2", fill: eyeCol }),
+        full && /* @__PURE__ */ jsx("circle", { cx: rx - 0.3, cy: y - 0.8, r: "0.7", fill: "white", opacity: "0.8" }),
+        lids
+      ] });
     default:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("circle", { cx: lx, cy: y, r: "3.5", fill: eyeWhite }),
@@ -183,7 +130,7 @@ function Eyes({ ei, eyeCol, eyeWhite, lidColor, full }) {
       ] });
   }
 }
-function Eyebrows({ bi, browColor }) {
+function Eyebrows({ bi, browColor, full = true }) {
   const lx = 25, rx = 39, y = 27;
   switch (bi) {
     case 0:
@@ -211,6 +158,23 @@ function Eyebrows({ bi, browColor }) {
         /* @__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" })
       ] });
+    case 5:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("line", { x1: lx - 3, y1: y - 1, x2: lx + 3, y2: y + 1, stroke: browColor, strokeWidth: "1.1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: rx - 3, y1: y + 1, x2: rx + 3, y2: y - 1, stroke: browColor, strokeWidth: "1.1", strokeLinecap: "round" })
+      ] });
+    case 6: {
+      const bw = full ? "2.0" : "1.5";
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 4} ${y + 0.5} Q${lx} ${y - 2} ${lx + 4} ${y + 0.5}`, fill: "none", stroke: browColor, strokeWidth: bw, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 4} ${y + 0.5} Q${rx} ${y - 2} ${rx + 4} ${y + 0.5}`, fill: "none", stroke: browColor, strokeWidth: bw, strokeLinecap: "round" })
+      ] });
+    }
+    case 7:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: `M${lx - 3.5} ${y} Q${lx} ${y - 1.5} ${lx + 3.5} ${y}`, fill: "none", stroke: browColor, strokeWidth: "0.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: `M${rx - 3.5} ${y} Q${rx} ${y - 1.5} ${rx + 3.5} ${y}`, fill: "none", stroke: browColor, strokeWidth: "0.5", strokeLinecap: "round" })
+      ] });
     default:
       return null;
   }
@@ -229,6 +193,17 @@ function Nose({ ni, noseFill }) {
         /* @__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" })
       ] });
+    case 4:
+      return /* @__PURE__ */ jsx("path", { d: `M${cx} ${y - 2} L${cx - 2} ${y + 1.5} L${cx + 2} ${y + 1.5} Z`, fill: noseFill, opacity: "0.4" });
+    case 5:
+      return /* @__PURE__ */ jsx("ellipse", { cx, cy: y, rx: "3.5", ry: "1.5", fill: noseFill, opacity: "0.35" });
+    case 6:
+      return /* @__PURE__ */ jsx("line", { x1: cx, y1: y - 3, x2: cx, y2: y + 1, stroke: noseFill, strokeWidth: "1.2", strokeLinecap: "round", opacity: "0.4" });
+    case 7:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx, cy: y + 0.5, r: "2", fill: noseFill, opacity: "0.35" }),
+        /* @__PURE__ */ jsx("ellipse", { cx, cy: y - 0.5, rx: "1", ry: "0.5", fill: noseFill, opacity: "0.15" })
+      ] });
     default:
       return /* @__PURE__ */ jsx("ellipse", { cx, cy: y, rx: "2", ry: "1.2", fill: noseFill, opacity: "0.35" });
   }
@@ -253,7 +228,7 @@ function Mouth({ mi, lipColor, isDark }) {
         /* @__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" });
+      return /* @__PURE__ */ jsx("path", { d: `M${cx - 4} ${y + 0.5} Q${cx} ${y + 1.5} ${cx + 4} ${y + 0.5}`, fill: "none", stroke: lipColor, strokeWidth: "1.4", 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" }),
@@ -263,12 +238,12 @@ function Mouth({ mi, lipColor, isDark }) {
       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 Accessory({ ai, glassesColor, earringColor, headbandColor }) {
+function Accessory({ ai, accessoryColor: _accessoryColor, glassesColor, earringColor, headbandColor, beautyMarkColor = "#3a2a2a", freckleColor = "#a0785a", skinColor = "#E8BA8B" }) {
   switch (ai) {
     case 0:
       return null;
     case 1:
-      return /* @__PURE__ */ jsx("circle", { cx: "40", cy: "44", r: "0.8", fill: "#3a2a2a" });
+      return /* @__PURE__ */ jsx("circle", { cx: "40", cy: "44", r: "0.8", fill: beautyMarkColor });
     case 2:
       return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: glassesColor, strokeWidth: "1", children: [
         /* @__PURE__ */ jsx("circle", { cx: "25", cy: "33", r: "5.5" }),
@@ -293,7 +268,7 @@ function Accessory({ ai, glassesColor, earringColor, headbandColor }) {
     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__ */ jsxs("g", { fill: "#a0785a", opacity: "0.35", children: [
+      return /* @__PURE__ */ jsxs("g", { fill: freckleColor, 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" }),
@@ -316,30 +291,34 @@ function Accessory({ ai, glassesColor, earringColor, headbandColor }) {
       ] });
     case 9:
       return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__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)" })
+        /* @__PURE__ */ jsx("rect", { x: "38", y: "38", width: "9", height: "4.5", rx: "1.2", fill: "#f0d0a0", transform: "rotate(-15 42 40)" }),
+        /* @__PURE__ */ jsx("rect", { x: "39.5", y: "38.5", width: "6", height: "3.5", rx: "0.8", fill: "#f5ddb5", transform: "rotate(-15 42 40)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "42.5", cy: "40.25", r: "0.5", fill: "#d4b898", transform: "rotate(-15 42 40)" })
       ] });
+    case 10:
+      return /* @__PURE__ */ jsx("line", { x1: "23", y1: "24.8", x2: "23.8", y2: "29.2", stroke: skinColor, strokeWidth: "1.3", strokeLinecap: "butt" });
+    case 11:
+      return /* @__PURE__ */ jsx("line", { x1: "41", y1: "24.8", x2: "40.2", y2: "29.2", stroke: skinColor, strokeWidth: "1.3", strokeLinecap: "butt" });
     default:
       return null;
   }
 }
-function PixelWrapper({ svgString, size, theme }) {
+function PixelWrapper({ svgString, size, theme, alt = "" }) {
+  const scale = size / 64;
   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 outlineWidth = Math.max(1, Math.round((theme._pixelOutlineWidth ?? 1) * scale));
   const scanlines = theme._pixelScanlines ?? false;
   const scanlineOpacity = theme._pixelScanlineOpacity ?? 0.08;
-  const scanlineSpacing = theme._pixelScanlineSpacing ?? 2;
+  const scanlineSpacing = Math.max(1, Math.round((theme._pixelScanlineSpacing ?? 2) * scale));
   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 shadowOffset = Math.max(1, Math.round((theme._pixelShadowOffset ?? 2) * scale));
   const contrast = theme._pixelContrast;
   const saturation = theme._pixelSaturation;
   const brightness = theme._pixelBrightness;
@@ -365,7 +344,7 @@ function PixelWrapper({ svgString, size, theme }) {
     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: "" }),
+    /* @__PURE__ */ jsx("img", { src: dataUri, width: density, height: density, style: imgStyle, alt }),
     scanlines && /* @__PURE__ */ jsx("div", { style: {
       position: "absolute",
       inset: 0,
@@ -384,20 +363,24 @@ function PixelWrapper({ svgString, size, theme }) {
   ] });
 }
 function GlassWrapper({ children, size, theme }) {
-  const blurRadius = theme._blurRadius ?? 12;
+  const scale = size / 64;
+  const blurRadius = (theme._blurRadius ?? 12) * scale;
   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 borderWidth = Math.max(0.5, (theme._borderWidth ?? 1) * scale);
   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 shadowY = Math.round((theme._shadowY ?? 8) * scale);
+  const shadowBlurR = Math.round((theme._shadowBlur ?? 32) * scale);
+  const shadowOpacity = theme._shadowOpacity ?? 0.12;
+  const shadowStr = theme._shadow ?? `0 ${shadowY}px ${shadowBlurR}px rgba(0,0,0,${shadowOpacity})`;
+  const bgRadius = (theme.bgRadius ?? 16) * scale;
   const containerStyle = {
     position: "relative",
     width: size,
@@ -476,6 +459,11 @@ function SolFace({
   const glassesColor = theme?.glassesColor ?? "#4a4a5a";
   const earringColor = theme?.earringColor ?? blend(skin, "#d4a840", 0.4);
   const headbandColor = theme?.headbandColor ?? blend(hairCol, "#c04040", 0.5);
+  const accColor = colorOverrides?.accessory ?? theme?.accessoryColor ?? derived.accessoryColor;
+  const earFillFinal = theme?.earColor ?? derived.earFill;
+  const lidFinal = theme?.lidColor ?? derived.lidColor;
+  const beautyMarkColor = theme?.beautyMarkColor ?? "#3a2a2a";
+  const freckleColor = theme?.freckleColor ?? "#a0785a";
   const id = useMemo(() => "sf" + djb2(walletAddress).toString(36), [walletAddress]);
   const cheekEnabled = theme?.cheekEnabled ?? true;
   const cheekColor = theme?.cheekColor ?? derived.cheekColor;
@@ -496,7 +484,7 @@ function SolFace({
       colorOverrides,
       detail: detailProp
     });
-    return /* @__PURE__ */ jsx(PixelWrapper, { svgString: pixelSvg, size, theme });
+    return /* @__PURE__ */ jsx(PixelWrapper, { svgString: pixelSvg, size, theme, alt: solFaceAltText(walletAddress) });
   }
   const svgElement = /* @__PURE__ */ jsxs(
     "svg",
@@ -507,24 +495,23 @@ function SolFace({
       height: size,
       className,
       style: { display: "block", ...style },
+      role: "img",
+      "aria-label": solFaceAltText(walletAddress),
       ...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: "50%", stopColor: skin }),
             /* @__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: "0%", stopColor: "#ffffff", stopOpacity: theme?.glowIntensity ?? 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: [
@@ -552,17 +539,17 @@ function SolFace({
           }
         ` }),
         /* @__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, 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 }),
+        theme?.hairEnabled !== false && /* @__PURE__ */ jsx(HairBack, { hi, id, flat }),
+        theme?.earsEnabled !== false && /* @__PURE__ */ jsx(Ears, { earFill: earFillFinal, earShadow: derived.earShadow }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "16", width: "36", height: "38", rx: "12", ry: "12", fill: skinFill, opacity: theme?.skinOpacity ?? 1 }),
+        full && cheekEnabled && !flat && (theme?.shadowEnabled ?? true) && /* @__PURE__ */ jsx(FaceOverlays, { id }),
+        theme?.hairEnabled !== false && /* @__PURE__ */ jsx(HairFront, { hi, id, hairCol, flat }),
+        ai === 5 && theme?.accessoriesEnabled !== false && /* @__PURE__ */ jsx(Accessory, { ai: 5, accessoryColor: accColor, glassesColor, earringColor, headbandColor, beautyMarkColor, freckleColor, skinColor: skin }),
+        /* @__PURE__ */ jsx("g", { className: blinkEnabled ? `${id}-eyes` : void 0, children: /* @__PURE__ */ jsx(Eyes, { ei: traits.eyeStyle % 9, eyeCol, eyeWhite, lidColor: lidFinal, full }) }),
+        theme?.eyebrowsEnabled !== false && /* @__PURE__ */ jsx(Eyebrows, { bi: traits.eyebrows % 8, browColor, full }),
+        theme?.noseEnabled !== false && /* @__PURE__ */ jsx(Nose, { ni: traits.nose % 8, noseFill }),
         /* @__PURE__ */ jsx(Mouth, { mi: traits.mouth % 8, lipColor, isDark: derived.isDark }),
-        ai !== 0 && ai !== 5 && /* @__PURE__ */ jsx(Accessory, { ai, glassesColor, earringColor, headbandColor }),
+        ai !== 0 && ai !== 5 && theme?.accessoriesEnabled !== false && /* @__PURE__ */ jsx(Accessory, { ai, accessoryColor: accColor, glassesColor, earringColor, headbandColor, beautyMarkColor, freckleColor, skinColor: skin }),
         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 })
       ]
     }