@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/cjs/animation/AnimatedPerson.js

@@ -1,160 +1,487 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var framerMotion = require('framer-motion');
-var React = require('react');
-var i18n = require('../core/i18n.js');
-var animationHelper = require('./animationHelper.js');
-var characterTypes = require('./characterTypes.js');
-
-const NiceAnimatedPerson = ({ id, name, size, score = 10, startPose = 'idle', onReady, character, config, pose, width,
-// height intentionally ignored — kept on the type for API symmetry.
-// colors prop is destructured for API completeness but not yet fully wired into character defaults.
- }) => {
-    var _a, _b, _c, _d, _e;
-    const { t } = i18n.useNiceTranslation();
-    const fx = animationHelper.usePersonControls();
-    const effectiveStartPose = pose !== null && pose !== void 0 ? pose : startPose;
-    const effectiveCharacter = character !== null && character !== void 0 ? character : config;
-    const effectiveSize = width !== null && width !== void 0 ? width : size;
-    const cfg = React.useMemo(() => ({ ...characterTypes.DEFAULT_CHARACTER, ...(effectiveCharacter !== null && effectiveCharacter !== void 0 ? effectiveCharacter : {}) }), [effectiveCharacter]);
-    React.useEffect(() => {
-        onReady === null || onReady === void 0 ? void 0 : onReady(fx);
-        void animationHelper.playPose(fx, effectiveStartPose, {});
-    }, [fx, onReady, effectiveStartPose]);
-    const W = (_c = (_b = (_a = cfg.size) !== null && _a !== void 0 ? _a : effectiveSize) !== null && _b !== void 0 ? _b : characterTypes.DEFAULT_CHARACTER.size) !== null && _c !== void 0 ? _c : 180;
-    const skin = characterTypes.pick(cfg.face.colors, 0, 'var(--anim-skin, #FFD2B3)');
-    return (jsxRuntime.jsx(framerMotion.motion.div, { id: id, style: { width: W, height: W * 1.35, overflow: 'visible' }, animate: fx.root, children: jsxRuntime.jsxs("svg", { viewBox: "0 0 180 240", width: "100%", height: "100%", role: "img", "aria-label": (_e = (_d = cfg.name) !== null && _d !== void 0 ? _d : name) !== null && _e !== void 0 ? _e : t('animatedPerson.juror', 'Juror'), children: [jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.body, children: [jsxRuntime.jsx("rect", { x: "68", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "75", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') }), jsxRuntime.jsx("rect", { x: "98", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "105", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') })] }), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.body, children: renderOutfit(cfg.outfit) }), jsxRuntime.jsx("rect", { x: "84", y: "82", width: "12", height: "12", rx: "4", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.leftArm, style: { transformOrigin: '64px 96px' }, children: [jsxRuntime.jsx("rect", { x: "36", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "44", cy: "136", r: "7", fill: skin })] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.rightArm, style: { transformOrigin: '116px 96px' }, children: [jsxRuntime.jsx("rect", { x: "128", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "136", cy: "136", r: "7", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.card, children: [jsxRuntime.jsx("rect", { x: "126", y: "50", width: "42", height: "30", rx: "4", fill: "var(--nice-color-surface, #fff)", stroke: "var(--nice-text-primary, #111)", strokeWidth: 1.2 }), jsxRuntime.jsx("text", { x: "147", y: "70", textAnchor: "middle", fontSize: "16", fontWeight: 700, fill: "var(--nice-text-primary, #111)", children: String(score) })] }), renderProp(cfg.prop)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.head, children: [renderHairBack(cfg.hair), renderFace(cfg.face), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.eyes, children: renderEyes(cfg.eyes) }), renderNose(cfg.nose), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.mouth, children: renderMouth(cfg.mouth) }), renderHeadwear(cfg.headwear)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.curse, initial: { opacity: 0 }, children: [jsxRuntime.jsx("rect", { x: "62", y: "10", width: "56", height: "22", rx: "8", fill: "var(--nice-text-primary, #111)" }), jsxRuntime.jsx("text", { x: "90", y: "26", textAnchor: "middle", fontSize: "12", fill: "var(--nice-text-inverse, #fff)", children: "#!%&*" }), jsxRuntime.jsx("path", { d: "M82 32 l4 8 l4 -8", fill: "var(--nice-text-primary, #111)" })] })] }) }));
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const framerMotion = require("framer-motion");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const animationHelper = require("./animationHelper.js");
+const characterTypes = require("./characterTypes.js");
+const NiceAnimatedPerson = ({
+  id,
+  name,
+  size,
+  score = 10,
+  startPose = "idle",
+  onReady,
+  character,
+  config,
+  pose,
+  width
+  // height intentionally ignored — kept on the type for API symmetry.
+  // colors prop is destructured for API completeness but not yet fully wired into character defaults.
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const fx = animationHelper.usePersonControls();
+  const effectiveStartPose = pose ?? startPose;
+  const effectiveCharacter = character ?? config;
+  const effectiveSize = width ?? size;
+  const cfg = React.useMemo(
+    () => ({ ...characterTypes.DEFAULT_CHARACTER, ...effectiveCharacter ?? {} }),
+    [effectiveCharacter]
+  );
+  React.useEffect(() => {
+    onReady?.(fx);
+    void animationHelper.playPose(fx, effectiveStartPose, {});
+  }, [fx, onReady, effectiveStartPose]);
+  const W = cfg.size ?? effectiveSize ?? characterTypes.DEFAULT_CHARACTER.size ?? 180;
+  const skin = characterTypes.pick(cfg.face.colors, 0, "var(--anim-skin, #FFD2B3)");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      id,
+      style: { width: W, height: W * 1.35, overflow: "visible" },
+      animate: fx.root,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          viewBox: "0 0 180 240",
+          width: "100%",
+          height: "100%",
+          role: "img",
+          "aria-label": cfg.name ?? name ?? t("animatedPerson.juror", "Juror"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.body, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: "68",
+                  y: "158",
+                  width: "14",
+                  height: "46",
+                  rx: "6",
+                  fill: characterTypes.pick(cfg.outfit.colors, 1, "var(--anim-outfit-leg, #334155)")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "ellipse",
+                {
+                  cx: "75",
+                  cy: "204",
+                  rx: "10",
+                  ry: "5",
+                  fill: characterTypes.pick(cfg.outfit.colors, 1, "var(--anim-outfit-leg-shadow, #1E293B)")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: "98",
+                  y: "158",
+                  width: "14",
+                  height: "46",
+                  rx: "6",
+                  fill: characterTypes.pick(cfg.outfit.colors, 1, "var(--anim-outfit-leg, #334155)")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "ellipse",
+                {
+                  cx: "105",
+                  cy: "204",
+                  rx: "10",
+                  ry: "5",
+                  fill: characterTypes.pick(cfg.outfit.colors, 1, "var(--anim-outfit-leg-shadow, #1E293B)")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.body, children: renderOutfit(cfg.outfit) }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "84", y: "82", width: "12", height: "12", rx: "4", fill: skin }),
+            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.leftArm, style: { transformOrigin: "64px 96px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "36", y: "96", width: "16", height: "36", rx: "7", fill: skin }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "44", cy: "136", r: "7", fill: skin })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.rightArm, style: { transformOrigin: "116px 96px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "128", y: "96", width: "16", height: "36", rx: "7", fill: skin }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "136", cy: "136", r: "7", fill: skin }),
+              /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.card, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: "126",
+                    y: "50",
+                    width: "42",
+                    height: "30",
+                    rx: "4",
+                    fill: "var(--nice-color-surface, #fff)",
+                    stroke: "var(--nice-text-primary, #111)",
+                    strokeWidth: 1.2
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: "147",
+                    y: "70",
+                    textAnchor: "middle",
+                    fontSize: "16",
+                    fontWeight: 700,
+                    fill: "var(--nice-text-primary, #111)",
+                    children: String(score)
+                  }
+                )
+              ] }),
+              renderProp(cfg.prop)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.head, children: [
+              renderHairBack(cfg.hair),
+              renderFace(cfg.face),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.eyes, children: renderEyes(cfg.eyes) }),
+              renderNose(cfg.nose),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.mouth, children: renderMouth(cfg.mouth) }),
+              renderHeadwear(cfg.headwear)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.curse, initial: { opacity: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "62", y: "10", width: "56", height: "22", rx: "8", fill: "var(--nice-text-primary, #111)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  x: "90",
+                  y: "26",
+                  textAnchor: "middle",
+                  fontSize: "12",
+                  fill: "var(--nice-text-inverse, #fff)",
+                  children: "#!%&*"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M82 32 l4 8 l4 -8", fill: "var(--nice-text-primary, #111)" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
 };
-/* ---------------- RENDERERS (redesigned proportions) ---------------- */
 function renderOutfit(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-shirt, #3B82F6)');
-    const accent = characterTypes.pick(cfg.colors, 1, base);
-    const stroke = characterTypes.pick(cfg.colors, 2, 'var(--anim-stroke, #111)');
-    switch (cfg.variant) {
-        case 'hoodie':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "52", y: "92", width: "76", height: "66", rx: "16", fill: base, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("path", { d: "M52 102 Q90 72 128 102", fill: accent, opacity: 0.2 }), jsxRuntime.jsx("ellipse", { cx: "90", cy: "94", rx: "18", ry: "6", fill: accent, opacity: 0.3 })] }));
-        case 'suit':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "52", y: "92", width: "76", height: "66", rx: "12", fill: base, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("path", { d: "M90 92 L72 118 L90 110 L108 118 Z", fill: accent, opacity: 0.75 }), jsxRuntime.jsx("rect", { x: "88", y: "110", width: "4", height: "48", fill: '#fff', opacity: 0.8 }), jsxRuntime.jsx("circle", { cx: "90", cy: "120", r: "2", fill: stroke }), jsxRuntime.jsx("circle", { cx: "90", cy: "134", r: "2", fill: stroke })] }));
-        case 'dress':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "52", y: "92", width: "76", height: "56", rx: "14", fill: base, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("path", { d: "M52 148 L128 148 L136 168 L44 168 Z", fill: accent })] }));
-        case 'tee':
-        default:
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "52", y: "92", width: "76", height: "66", rx: "14", fill: base, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("path", { d: "M82 92 L90 100 L98 92", fill: "none", stroke: stroke, strokeWidth: 1, opacity: 0.4 })] }));
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-shirt, #3B82F6)");
+  const accent = characterTypes.pick(cfg.colors, 1, base);
+  const stroke = characterTypes.pick(cfg.colors, 2, "var(--anim-stroke, #111)");
+  switch (cfg.variant) {
+    case "hoodie":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "52",
+            y: "92",
+            width: "76",
+            height: "66",
+            rx: "16",
+            fill: base,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M52 102 Q90 72 128 102", fill: accent, opacity: 0.2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "94", rx: "18", ry: "6", fill: accent, opacity: 0.3 })
+      ] });
+    case "suit":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "52",
+            y: "92",
+            width: "76",
+            height: "66",
+            rx: "12",
+            fill: base,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M90 92 L72 118 L90 110 L108 118 Z", fill: accent, opacity: 0.75 }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "88", y: "110", width: "4", height: "48", fill: "#fff", opacity: 0.8 }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "120", r: "2", fill: stroke }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "134", r: "2", fill: stroke })
+      ] });
+    case "dress":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "52",
+            y: "92",
+            width: "76",
+            height: "56",
+            rx: "14",
+            fill: base,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M52 148 L128 148 L136 168 L44 168 Z", fill: accent })
+      ] });
+    case "tee":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "52",
+            y: "92",
+            width: "76",
+            height: "66",
+            rx: "14",
+            fill: base,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M82 92 L90 100 L98 92",
+            fill: "none",
+            stroke,
+            strokeWidth: 1,
+            opacity: 0.4
+          }
+        )
+      ] });
+  }
 }
 function renderHairBack(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-hair, #1F2937)');
-    const hi = characterTypes.pick(cfg.colors, 1, base);
-    switch (cfg.variant) {
-        case 'long':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M60 46 Q90 22 120 46 L120 76 Q90 92 60 76 Z", fill: base }), jsxRuntime.jsx("path", { d: "M90 46 Q92 56 102 62", stroke: hi, strokeWidth: 2.5, opacity: 0.35 })] }));
-        case 'curly':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M66 40 q10 -14 22 0 q10 -14 22 0 l0 12 q-32 12 -64 0 Z", fill: base }), jsxRuntime.jsx("circle", { cx: "66", cy: "44", r: "5", fill: base }), jsxRuntime.jsx("circle", { cx: "114", cy: "44", r: "5", fill: base })] }));
-        case 'mohawk':
-            return jsxRuntime.jsx("path", { d: "M82 28 L98 28 L100 50 L80 50 Z", fill: base });
-        case 'short':
-            return jsxRuntime.jsx("path", { d: "M68 47 C78 24, 102 24, 112 47 L68 47 Z", fill: base });
-        case 'none':
-        default:
-            return null;
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-hair, #1F2937)");
+  const hi = characterTypes.pick(cfg.colors, 1, base);
+  switch (cfg.variant) {
+    case "long":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M60 46 Q90 22 120 46 L120 76 Q90 92 60 76 Z", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M90 46 Q92 56 102 62", stroke: hi, strokeWidth: 2.5, opacity: 0.35 })
+      ] });
+    case "curly":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M66 40 q10 -14 22 0 q10 -14 22 0 l0 12 q-32 12 -64 0 Z", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "66", cy: "44", r: "5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "114", cy: "44", r: "5", fill: base })
+      ] });
+    case "mohawk":
+      return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M82 28 L98 28 L100 50 L80 50 Z", fill: base });
+    case "short":
+      return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M68 47 C78 24, 102 24, 112 47 L68 47 Z", fill: base });
+    case "none":
+    default:
+      return null;
+  }
 }
 function renderFace(cfg) {
-    const skin = characterTypes.pick(cfg.colors, 0, 'var(--anim-skin, #FFD2B3)');
-    const shadow = characterTypes.pick(cfg.colors, 1, skin);
-    const stroke = characterTypes.pick(cfg.colors, 2, 'var(--anim-stroke, #111)');
-    switch (cfg.variant) {
-        case 'oval':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("ellipse", { cx: "90", cy: "60", rx: "26", ry: "28", fill: skin, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })] }));
-        case 'square':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "64", y: "36", width: "52", height: "48", rx: "12", fill: skin, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })] }));
-        case 'heart':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M90 36 q-18 10 -18 26 q0 16 18 26 q18 -10 18 -26 q0 -16 -18 -26 Z", fill: skin, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })] }));
-        case 'round':
-        default:
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("circle", { cx: "90", cy: "60", r: "26", fill: skin, stroke: stroke, strokeWidth: 1 }), jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })] }));
-    }
+  const skin = characterTypes.pick(cfg.colors, 0, "var(--anim-skin, #FFD2B3)");
+  const shadow = characterTypes.pick(cfg.colors, 1, skin);
+  const stroke = characterTypes.pick(cfg.colors, 2, "var(--anim-stroke, #111)");
+  switch (cfg.variant) {
+    case "oval":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "60", rx: "26", ry: "28", fill: skin, stroke, strokeWidth: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })
+      ] });
+    case "square":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "64",
+            y: "36",
+            width: "52",
+            height: "48",
+            rx: "12",
+            fill: skin,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })
+      ] });
+    case "heart":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M90 36 q-18 10 -18 26 q0 16 18 26 q18 -10 18 -26 q0 -16 -18 -26 Z",
+            fill: skin,
+            stroke,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })
+      ] });
+    case "round":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "60", r: "26", fill: skin, stroke, strokeWidth: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "16", ry: "5", fill: shadow, opacity: 0.08 })
+      ] });
+  }
 }
 function renderEyes(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-eye-base, #111)');
-    switch (cfg.variant) {
-        case 'oval':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ellipse", { cx: "80", cy: "56", rx: "4.5", ry: "3.5", fill: base }), jsxRuntime.jsx("ellipse", { cx: "100", cy: "56", rx: "4.5", ry: "3.5", fill: base }), jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1.2", fill: '#fff', opacity: 0.7 }), jsxRuntime.jsx("circle", { cx: "101.5", cy: "55", r: "1.2", fill: '#fff', opacity: 0.7 })] }));
-        case 'laugh':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M76 56 q4 -4 8 0", stroke: base, strokeWidth: 2.5, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M96 56 q4 -4 8 0", stroke: base, strokeWidth: 2.5, fill: "none", strokeLinecap: "round" })] }));
-        case 'wink':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "80", cy: "56", r: "3.5", fill: base }), jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1", fill: '#fff', opacity: 0.7 }), jsxRuntime.jsx("path", { d: "M96 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" })] }));
-        case 'sleepy':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M76 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M96 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" })] }));
-        case 'dot':
-        default:
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "80", cy: "56", r: "3.5", fill: base }), jsxRuntime.jsx("circle", { cx: "100", cy: "56", r: "3.5", fill: base }), jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1", fill: '#fff', opacity: 0.7 }), jsxRuntime.jsx("circle", { cx: "101.5", cy: "55", r: "1", fill: '#fff', opacity: 0.7 })] }));
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-eye-base, #111)");
+  switch (cfg.variant) {
+    case "oval":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "80", cy: "56", rx: "4.5", ry: "3.5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "100", cy: "56", rx: "4.5", ry: "3.5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1.2", fill: "#fff", opacity: 0.7 }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "101.5", cy: "55", r: "1.2", fill: "#fff", opacity: 0.7 })
+      ] });
+    case "laugh":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M76 56 q4 -4 8 0",
+            stroke: base,
+            strokeWidth: 2.5,
+            fill: "none",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M96 56 q4 -4 8 0",
+            stroke: base,
+            strokeWidth: 2.5,
+            fill: "none",
+            strokeLinecap: "round"
+          }
+        )
+      ] });
+    case "wink":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "80", cy: "56", r: "3.5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1", fill: "#fff", opacity: 0.7 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M96 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" })
+      ] });
+    case "sleepy":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M76 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M96 56 l8 0", stroke: base, strokeWidth: 2.5, strokeLinecap: "round" })
+      ] });
+    case "dot":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "80", cy: "56", r: "3.5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "100", cy: "56", r: "3.5", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "81.5", cy: "55", r: "1", fill: "#fff", opacity: 0.7 }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "101.5", cy: "55", r: "1", fill: "#fff", opacity: 0.7 })
+      ] });
+  }
 }
 function renderNose(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-nose, #111)');
-    switch (cfg.variant) {
-        case 'triangle':
-            return jsxRuntime.jsx("path", { d: "M90 62 l-4 8 h8 Z", fill: base, opacity: 0.6 });
-        case 'round':
-            return jsxRuntime.jsx("circle", { cx: "90", cy: "66", r: "3", fill: base, opacity: 0.6 });
-        case 'line':
-        default:
-            return jsxRuntime.jsx("rect", { x: "89", y: "62", width: "2", height: "8", fill: base, rx: "1", opacity: 0.5 });
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-nose, #111)");
+  switch (cfg.variant) {
+    case "triangle":
+      return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M90 62 l-4 8 h8 Z", fill: base, opacity: 0.6 });
+    case "round":
+      return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "66", r: "3", fill: base, opacity: 0.6 });
+    case "line":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "89", y: "62", width: "2", height: "8", fill: base, rx: "1", opacity: 0.5 });
+  }
 }
 function renderMouth(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-mouth-base, #111)');
-    const tooth = characterTypes.pick(cfg.colors, 1, 'var(--white, #fff)');
-    switch (cfg.variant) {
-        case 'frown':
-            return (jsxRuntime.jsx("path", { d: "M80 76 q10 -6 20 0", stroke: base, strokeWidth: 2.5, fill: "none", strokeLinecap: "round" }));
-        case 'open':
-            return jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "7", ry: "5", fill: base });
-        case 'flat':
-            return jsxRuntime.jsx("rect", { x: "82", y: "75", width: "16", height: "2.5", rx: "1.25", fill: base });
-        case 'o':
-            return jsxRuntime.jsx("circle", { cx: "90", cy: "76", r: "4", fill: base });
-        case 'teeth':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "82", y: "74", width: "16", height: "7", rx: "3", fill: base }), jsxRuntime.jsx("rect", { x: "84", y: "75", width: "12", height: "3", rx: "1", fill: tooth })] }));
-        case 'smile':
-        default:
-            return (jsxRuntime.jsx("path", { d: "M80 76 q10 8 20 0", stroke: base, strokeWidth: 2.5, fill: "none", strokeLinecap: "round" }));
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-mouth-base, #111)");
+  const tooth = characterTypes.pick(cfg.colors, 1, "var(--white, #fff)");
+  switch (cfg.variant) {
+    case "frown":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M80 76 q10 -6 20 0",
+          stroke: base,
+          strokeWidth: 2.5,
+          fill: "none",
+          strokeLinecap: "round"
+        }
+      );
+    case "open":
+      return /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "90", cy: "76", rx: "7", ry: "5", fill: base });
+    case "flat":
+      return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "82", y: "75", width: "16", height: "2.5", rx: "1.25", fill: base });
+    case "o":
+      return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "90", cy: "76", r: "4", fill: base });
+    case "teeth":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "82", y: "74", width: "16", height: "7", rx: "3", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "84", y: "75", width: "12", height: "3", rx: "1", fill: tooth })
+      ] });
+    case "smile":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M80 76 q10 8 20 0",
+          stroke: base,
+          strokeWidth: 2.5,
+          fill: "none",
+          strokeLinecap: "round"
+        }
+      );
+  }
 }
 function renderHeadwear(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-headwear-base, #111)');
-    const accent = characterTypes.pick(cfg.colors, 1, base);
-    switch (cfg.variant) {
-        case 'cap':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M68 44 q22 -18 44 0 l-6 4 q-18 -10 -28 0 Z", fill: base }), jsxRuntime.jsx("rect", { x: "60", y: "44", width: "52", height: "5", rx: "2", fill: base })] }));
-        case 'headphones':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M66 56 q0 -24 24 -24 q24 0 24 24", stroke: base, strokeWidth: 5, fill: "none" }), jsxRuntime.jsx("rect", { x: "58", y: "52", width: "12", height: "16", rx: "4", fill: accent }), jsxRuntime.jsx("rect", { x: "110", y: "52", width: "12", height: "16", rx: "4", fill: accent })] }));
-        case 'hat':
-            return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "62", y: "38", width: "56", height: "8", rx: "3", fill: base }), jsxRuntime.jsx("rect", { x: "72", y: "30", width: "36", height: "10", rx: "3", fill: base })] }));
-        case 'crown':
-            return jsxRuntime.jsx("path", { d: "M72 42 l6 12 l6 -10 l6 10 l6 -10 l6 12 v6 h-30 Z", fill: base });
-        case 'none':
-        default:
-            return null;
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-headwear-base, #111)");
+  const accent = characterTypes.pick(cfg.colors, 1, base);
+  switch (cfg.variant) {
+    case "cap":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M68 44 q22 -18 44 0 l-6 4 q-18 -10 -28 0 Z", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "60", y: "44", width: "52", height: "5", rx: "2", fill: base })
+      ] });
+    case "headphones":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M66 56 q0 -24 24 -24 q24 0 24 24", stroke: base, strokeWidth: 5, fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "58", y: "52", width: "12", height: "16", rx: "4", fill: accent }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "110", y: "52", width: "12", height: "16", rx: "4", fill: accent })
+      ] });
+    case "hat":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "62", y: "38", width: "56", height: "8", rx: "3", fill: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "72", y: "30", width: "36", height: "10", rx: "3", fill: base })
+      ] });
+    case "crown":
+      return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M72 42 l6 12 l6 -10 l6 10 l6 -10 l6 12 v6 h-30 Z", fill: base });
+    case "none":
+    default:
+      return null;
+  }
 }
 function renderProp(cfg) {
-    const base = characterTypes.pick(cfg.colors, 0, 'var(--anim-prop-base, #111)');
-    const accent = characterTypes.pick(cfg.colors, 1, 'var(--anim-prop-accent, #666)');
-    const light = characterTypes.pick(cfg.colors, 2, 'var(--anim-prop-light, #CCC)');
-    switch (cfg.variant) {
-        case 'mic':
-            return (jsxRuntime.jsxs("g", { transform: "translate(140,90)", children: [jsxRuntime.jsx("rect", { x: "0", y: "0", width: "4", height: "16", rx: "2", fill: accent }), jsxRuntime.jsx("circle", { cx: "2", cy: "-2", r: "6", fill: base, stroke: light, strokeWidth: 1 })] }));
-        case 'clipboard':
-            return (jsxRuntime.jsxs("g", { transform: "translate(140,86)", children: [jsxRuntime.jsx("rect", { x: "-6", y: "-2", width: "20", height: "26", rx: "3", fill: light, stroke: base }), jsxRuntime.jsx("rect", { x: "0", y: "-6", width: "8", height: "6", rx: "2", fill: base })] }));
-        case 'star':
-            return (jsxRuntime.jsx("g", { transform: "translate(140,86)", children: jsxRuntime.jsx("path", { d: "M8 0 L10 6 L16 6 L11 10 L13 16 L8 12 L3 16 L5 10 L0 6 L6 6 Z", fill: accent, stroke: base }) }));
-        case 'none':
-        default:
-            return null;
-    }
+  const base = characterTypes.pick(cfg.colors, 0, "var(--anim-prop-base, #111)");
+  const accent = characterTypes.pick(cfg.colors, 1, "var(--anim-prop-accent, #666)");
+  const light = characterTypes.pick(cfg.colors, 2, "var(--anim-prop-light, #CCC)");
+  switch (cfg.variant) {
+    case "mic":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(140,90)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "4", height: "16", rx: "2", fill: accent }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "2", cy: "-2", r: "6", fill: base, stroke: light, strokeWidth: 1 })
+      ] });
+    case "clipboard":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(140,86)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "-6", y: "-2", width: "20", height: "26", rx: "3", fill: light, stroke: base }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "-6", width: "8", height: "6", rx: "2", fill: base })
+      ] });
+    case "star":
+      return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(140,86)", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M8 0 L10 6 L16 6 L11 10 L13 16 L8 12 L3 16 L5 10 L0 6 L6 6 Z",
+          fill: accent,
+          stroke: base
+        }
+      ) });
+    case "none":
+    default:
+      return null;
+  }
 }
-
-module.exports = NiceAnimatedPerson;
+exports.default = NiceAnimatedPerson;