@pixygon/avatar 1.0.0 → 1.1.0

package/dist/components/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,12 +17,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
-  AvatarEditor: () => AvatarEditor
+  AvatarEditor: () => AvatarEditor,
+  AvatarPreview: () => AvatarPreview,
+  AvatarRenderer: () => AvatarRenderer,
+  AvatarThumbnail: () => AvatarThumbnail
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -204,8 +217,271 @@ function useAvatarEditor(initial) {
   return { appearance, tab, setTab, update, randomize, reset };
 }
 
-// src/components/AvatarEditor.tsx
+// src/components/AvatarRenderer.tsx
+var import_react2 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_drei = require("@react-three/drei");
+var THREE2 = __toESM(require("three"));
+
+// src/skeleton.ts
+function mirrorX(p) {
+  return [-p[0], p[1], p[2]];
+}
+function buildSkeleton(body) {
+  const h = 0.85 + body.height * 0.35;
+  const b = 0.75 + body.build * 0.5;
+  const footY = 0.02 * h;
+  const ankleY = 0.08 * h;
+  const kneeY = 0.45 * h;
+  const hipY = 0.88 * h;
+  const waistY = 0.95 * h;
+  const chestY = 1.18 * h;
+  const shoulderY = 1.3 * h;
+  const neckY = 1.38 * h;
+  const headBaseY = 1.42 * h;
+  const headCenterY = 1.55 * h;
+  const hipSpread = 0.09 * b;
+  const shoulderSpread = 0.16 * b;
+  const bones = [];
+  bones.push({ start: [0, hipY, 0], end: [0, waistY, 0], radius: 0.1 * b });
+  bones.push({ start: [0, waistY, 0], end: [0, chestY, 0], radius: 0.11 * b });
+  bones.push({ start: [0, chestY, 0], end: [0, shoulderY, 0], radius: 0.12 * b });
+  bones.push({ start: [0, neckY, 0], end: [0, headBaseY, 0], radius: 0.04 * b });
+  const lShoulder = [shoulderSpread, shoulderY, 0];
+  const lElbow = [shoulderSpread + 0.22 * h, shoulderY - 0.08 * h, 0];
+  const lWrist = [shoulderSpread + 0.42 * h, shoulderY - 0.18 * h, 0];
+  const lHand = [shoulderSpread + 0.5 * h, shoulderY - 0.22 * h, 0];
+  bones.push({ start: lShoulder, end: lElbow, radius: 0.04 * b });
+  bones.push({ start: lElbow, end: lWrist, radius: 0.035 * b });
+  bones.push({ start: lWrist, end: lHand, radius: 0.03 * b });
+  bones.push({ start: mirrorX(lShoulder), end: mirrorX(lElbow), radius: 0.04 * b });
+  bones.push({ start: mirrorX(lElbow), end: mirrorX(lWrist), radius: 0.035 * b });
+  bones.push({ start: mirrorX(lWrist), end: mirrorX(lHand), radius: 0.03 * b });
+  const lHip = [hipSpread, hipY, 0];
+  const lKnee = [hipSpread + 0.01, kneeY, 0];
+  const lAnkle = [hipSpread, ankleY, 0];
+  const lToe = [hipSpread, footY, 0.06];
+  bones.push({ start: lHip, end: lKnee, radius: 0.055 * b });
+  bones.push({ start: lKnee, end: lAnkle, radius: 0.045 * b });
+  bones.push({ start: lAnkle, end: lToe, radius: 0.035 * b });
+  bones.push({ start: mirrorX(lHip), end: mirrorX(lKnee), radius: 0.055 * b });
+  bones.push({ start: mirrorX(lKnee), end: mirrorX(lAnkle), radius: 0.045 * b });
+  bones.push({ start: mirrorX(lAnkle), end: mirrorX(lToe), radius: 0.035 * b });
+  const head = {
+    center: [0, headCenterY, 0],
+    radius_x: 0.11,
+    radius_y: 0.12,
+    radius_z: 0.1
+  };
+  return { bones, head };
+}
+
+// src/utils/geometry.ts
+var THREE = __toESM(require("three"));
+var RING_SEGMENTS = 10;
+var CAP_RINGS = 4;
+function capsuleBetweenGeometry(start, end, radius) {
+  const s = new THREE.Vector3(...start);
+  const e = new THREE.Vector3(...end);
+  const dir = new THREE.Vector3().subVectors(e, s);
+  const length = dir.length();
+  let up, right, forward;
+  if (length > 1e-4) {
+    up = dir.clone().divideScalar(length);
+    const ref = Math.abs(up.y) > 0.99 ? new THREE.Vector3(0, 0, 1) : new THREE.Vector3(0, 1, 0);
+    right = new THREE.Vector3().crossVectors(up, ref).normalize();
+    forward = new THREE.Vector3().crossVectors(right, up);
+  } else {
+    up = new THREE.Vector3(0, 1, 0);
+    right = new THREE.Vector3(1, 0, 0);
+    forward = new THREE.Vector3(0, 0, 1);
+  }
+  const positions = [];
+  const normals = [];
+  const indices = [];
+  const seg = RING_SEGMENTS;
+  const transformPos = (lx, ly, lz) => [
+    s.x + right.x * lx + up.x * ly + forward.x * lz,
+    s.y + right.y * lx + up.y * ly + forward.y * lz,
+    s.z + right.z * lx + up.z * ly + forward.z * lz
+  ];
+  const transformNorm = (nx, ny, nz) => {
+    const v = new THREE.Vector3(
+      right.x * nx + up.x * ny + forward.x * nz,
+      right.y * nx + up.y * ny + forward.y * nz,
+      right.z * nx + up.z * ny + forward.z * nz
+    ).normalize();
+    return [v.x, v.y, v.z];
+  };
+  for (let ring = 0; ring <= CAP_RINGS; ring++) {
+    const phi = Math.PI * 0.5 * (1 - ring / CAP_RINGS);
+    const ly = -Math.sin(phi) * radius;
+    const rr = Math.cos(phi) * radius;
+    for (let j = 0; j <= seg; j++) {
+      const theta = 2 * Math.PI * j / seg;
+      const lx = rr * Math.cos(theta);
+      const lz = rr * Math.sin(theta);
+      positions.push(...transformPos(lx, ly, lz));
+      normals.push(...transformNorm(lx / radius, -Math.sin(phi), lz / radius));
+    }
+  }
+  for (let ring = 0; ring <= 1; ring++) {
+    const ly = ring * length;
+    for (let j = 0; j <= seg; j++) {
+      const theta = 2 * Math.PI * j / seg;
+      const lx = radius * Math.cos(theta);
+      const lz = radius * Math.sin(theta);
+      positions.push(...transformPos(lx, ly, lz));
+      normals.push(...transformNorm(lx / radius, 0, lz / radius));
+    }
+  }
+  for (let ring = 0; ring <= CAP_RINGS; ring++) {
+    const phi = Math.PI * 0.5 * ring / CAP_RINGS;
+    const ly = length + Math.sin(phi) * radius;
+    const rr = Math.cos(phi) * radius;
+    for (let j = 0; j <= seg; j++) {
+      const theta = 2 * Math.PI * j / seg;
+      const lx = rr * Math.cos(theta);
+      const lz = rr * Math.sin(theta);
+      positions.push(...transformPos(lx, ly, lz));
+      normals.push(...transformNorm(lx / radius, Math.sin(phi), lz / radius));
+    }
+  }
+  const totalRings = CAP_RINGS + 2 + CAP_RINGS;
+  for (let ring = 0; ring < totalRings; ring++) {
+    for (let j = 0; j < seg; j++) {
+      const cur = ring * (seg + 1) + j;
+      const next = cur + seg + 1;
+      indices.push(cur, next, cur + 1);
+      indices.push(cur + 1, next, next + 1);
+    }
+  }
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+  geo.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));
+  geo.setIndex(indices);
+  return geo;
+}
+function ellipsoidGeometry(rx, ry, rz) {
+  const segs = 14;
+  const rings = 12;
+  const positions = [];
+  const normals = [];
+  const indices = [];
+  for (let ring = 0; ring <= rings; ring++) {
+    const phi = Math.PI * ring / rings;
+    const y = ry * Math.cos(phi);
+    const rr = Math.sin(phi);
+    for (let seg = 0; seg <= segs; seg++) {
+      const theta = 2 * Math.PI * seg / segs;
+      const x = rx * rr * Math.cos(theta);
+      const z = rz * rr * Math.sin(theta);
+      positions.push(x, y, z);
+      const nx = x / (rx * rx);
+      const ny = y / (ry * ry);
+      const nz = z / (rz * rz);
+      const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1;
+      normals.push(nx / len, ny / len, nz / len);
+    }
+  }
+  for (let ring = 0; ring < rings; ring++) {
+    for (let seg = 0; seg < segs; seg++) {
+      const cur = ring * (segs + 1) + seg;
+      const next = cur + segs + 1;
+      indices.push(cur, next, cur + 1);
+      indices.push(cur + 1, next, next + 1);
+    }
+  }
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+  geo.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));
+  geo.setIndex(indices);
+  return geo;
+}
+
+// src/components/AvatarRenderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function AvatarModel({ appearance }) {
+  const groupRef = (0, import_react2.useRef)(null);
+  const { boneGeos, headGeo, headPos, material } = (0, import_react2.useMemo)(() => {
+    const { bones, head } = buildSkeleton(appearance.body);
+    const skinColor = new THREE2.Color(...appearance.skin_color);
+    const mat = new THREE2.MeshStandardMaterial({
+      color: skinColor,
+      roughness: 0.65,
+      metalness: 0.05
+    });
+    const geos = bones.map((b) => capsuleBetweenGeometry(b.start, b.end, b.radius));
+    const hGeo = ellipsoidGeometry(
+      head.radius_x * appearance.head.width,
+      head.radius_y * appearance.head.height,
+      head.radius_z * appearance.head.width
+    );
+    return {
+      boneGeos: geos,
+      headGeo: hGeo,
+      headPos: head.center,
+      material: mat
+    };
+  }, [appearance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { ref: groupRef, children: [
+    boneGeos.map((geo, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mesh", { geometry: geo, material }, i)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mesh", { geometry: headGeo, material, position: headPos })
+  ] });
+}
+function Scene({ appearance, autoRotate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ambientLight", { intensity: 0.5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("directionalLight", { position: [2, 4, 3], intensity: 1.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("directionalLight", { position: [-1, 2, -2], intensity: 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarModel, { appearance }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_drei.OrbitControls,
+      {
+        autoRotate,
+        autoRotateSpeed: 2,
+        enablePan: false,
+        minDistance: 0.8,
+        maxDistance: 4,
+        target: [0, 0.75, 0]
+      }
+    )
+  ] });
+}
+function AvatarRenderer({
+  appearance,
+  width = "100%",
+  height = 300,
+  autoRotate = false,
+  background = "#15151f",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        borderRadius: 8,
+        overflow: "hidden",
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_fiber.Canvas,
+        {
+          camera: { position: [0, 1, 1.8], fov: 50 },
+          style: { background },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scene, { appearance, autoRotate })
+        }
+      )
+    }
+  );
+}
+
+// src/components/AvatarEditor.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var TABS = [
   { key: "body", label: "Body" },
   { key: "head", label: "Head" },
@@ -228,113 +504,127 @@ function AvatarEditor({
     update(path, value);
     setTimeout(() => onChange?.(appearance), 0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: rootStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: headerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 700, fontSize: 18 }, children: "Avatar Editor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btnStyle, onClick: randomize, children: "Randomize" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btnStyle, onClick: reset, children: "Reset" }),
-        onCancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: btnStyle, onClick: onCancel, children: "Cancel" }),
-        onDone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { ...btnStyle, background: "#3b6" }, onClick: () => onDone(appearance), children: "Done" })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 700, fontSize: 18 }, children: "Avatar Editor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: btnStyle, onClick: randomize, children: "Randomize" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: btnStyle, onClick: reset, children: "Reset" }),
+        onCancel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: btnStyle, onClick: onCancel, children: "Cancel" }),
+        onDone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: { ...btnStyle, background: "#3b6" }, onClick: () => onDone(appearance), children: "Done" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: tabBarStyle, children: TABS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        onClick: () => setTab(t.key),
-        style: {
-          ...tabStyle,
-          ...tab === t.key ? tabActiveStyle : {}
-        },
-        children: t.label
-      },
-      t.key
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: contentStyle, children: [
-      tab === "body" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BodyTab, { appearance, onUpdate: handleUpdate }),
-      tab === "head" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadTab, { appearance, onUpdate: handleUpdate }),
-      tab === "eyes" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyesTab, { appearance, onUpdate: handleUpdate }),
-      tab === "brows" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrowsTab, { appearance, onUpdate: handleUpdate }),
-      tab === "nose" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoseTab, { appearance, onUpdate: handleUpdate }),
-      tab === "mouth" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MouthTab, { appearance, onUpdate: handleUpdate }),
-      tab === "hair" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HairTab, { appearance, onUpdate: handleUpdate }),
-      tab === "extras" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExtrasTab, { appearance, onUpdate: handleUpdate })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mainStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: previewPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        AvatarRenderer,
+        {
+          appearance,
+          width: "100%",
+          height: "100%",
+          autoRotate: false,
+          background: "#12121a"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: controlsPaneStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: tabBarStyle, children: TABS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => setTab(t.key),
+            style: {
+              ...tabStyle,
+              ...tab === t.key ? tabActiveStyle : {}
+            },
+            children: t.label
+          },
+          t.key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: contentStyle, children: [
+          tab === "body" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyTab, { appearance, onUpdate: handleUpdate }),
+          tab === "head" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeadTab, { appearance, onUpdate: handleUpdate }),
+          tab === "eyes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EyesTab, { appearance, onUpdate: handleUpdate }),
+          tab === "brows" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrowsTab, { appearance, onUpdate: handleUpdate }),
+          tab === "nose" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoseTab, { appearance, onUpdate: handleUpdate }),
+          tab === "mouth" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MouthTab, { appearance, onUpdate: handleUpdate }),
+          tab === "hair" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HairTab, { appearance, onUpdate: handleUpdate }),
+          tab === "extras" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExtrasTab, { appearance, onUpdate: handleUpdate })
+        ] })
+      ] })
     ] })
   ] });
 }
 function BodyTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Body" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Height", value: appearance.body.height, onChange: (v) => onUpdate("body.height", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Build", value: appearance.body.build, onChange: (v) => onUpdate("body.build", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Skin Colour" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourPresets, { current: appearance.skin_color, presets: SKIN_PRESETS, onPick: (c) => onUpdate("skin_color", c) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Body" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Height", value: appearance.body.height, onChange: (v) => onUpdate("body.height", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Build", value: appearance.body.build, onChange: (v) => onUpdate("body.build", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Skin Colour" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColourPresets, { current: appearance.skin_color, presets: SKIN_PRESETS, onPick: (c) => onUpdate("skin_color", c) })
   ] });
 }
 function HeadTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Head Shape" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Width", value: appearance.head.width, min: 0.5, max: 1.5, onChange: (v) => onUpdate("head.width", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Height", value: appearance.head.height, min: 0.5, max: 1.5, onChange: (v) => onUpdate("head.height", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Head Shape" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Width", value: appearance.head.width, min: 0.5, max: 1.5, onChange: (v) => onUpdate("head.width", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Height", value: appearance.head.height, min: 0.5, max: 1.5, onChange: (v) => onUpdate("head.height", v) })
   ] });
 }
 function EyesTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Eyes" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.eye_style, count: STYLE_COUNTS.eye, onChange: (v) => onUpdate("head.eye_style", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourPresets, { current: appearance.head.eye_color, presets: EYE_COLOR_PRESETS, onPick: (c) => onUpdate("head.eye_color", c) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.eye_y, onChange: (v) => onUpdate("head.eye_y", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Spacing", value: appearance.head.eye_spacing, onChange: (v) => onUpdate("head.eye_spacing", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Size", value: appearance.head.eye_size, onChange: (v) => onUpdate("head.eye_size", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Rotation", value: appearance.head.eye_rotation, onChange: (v) => onUpdate("head.eye_rotation", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Eyes" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.eye_style, count: STYLE_COUNTS.eye, onChange: (v) => onUpdate("head.eye_style", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColourPresets, { current: appearance.head.eye_color, presets: EYE_COLOR_PRESETS, onPick: (c) => onUpdate("head.eye_color", c) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.eye_y, onChange: (v) => onUpdate("head.eye_y", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Spacing", value: appearance.head.eye_spacing, onChange: (v) => onUpdate("head.eye_spacing", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Size", value: appearance.head.eye_size, onChange: (v) => onUpdate("head.eye_size", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Rotation", value: appearance.head.eye_rotation, onChange: (v) => onUpdate("head.eye_rotation", v) })
   ] });
 }
 function BrowsTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Eyebrows" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.brow_style, count: STYLE_COUNTS.brow, onChange: (v) => onUpdate("head.brow_style", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourPresets, { current: appearance.head.brow_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.brow_color", c) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.brow_y, onChange: (v) => onUpdate("head.brow_y", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Spacing", value: appearance.head.brow_spacing, onChange: (v) => onUpdate("head.brow_spacing", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Size", value: appearance.head.brow_size, onChange: (v) => onUpdate("head.brow_size", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Rotation", value: appearance.head.brow_rotation, onChange: (v) => onUpdate("head.brow_rotation", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Eyebrows" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.brow_style, count: STYLE_COUNTS.brow, onChange: (v) => onUpdate("head.brow_style", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColourPresets, { current: appearance.head.brow_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.brow_color", c) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.brow_y, onChange: (v) => onUpdate("head.brow_y", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Spacing", value: appearance.head.brow_spacing, onChange: (v) => onUpdate("head.brow_spacing", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Size", value: appearance.head.brow_size, onChange: (v) => onUpdate("head.brow_size", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Rotation", value: appearance.head.brow_rotation, onChange: (v) => onUpdate("head.brow_rotation", v) })
   ] });
 }
 function NoseTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Nose" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.nose_style, count: STYLE_COUNTS.nose, onChange: (v) => onUpdate("head.nose_style", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.nose_y, onChange: (v) => onUpdate("head.nose_y", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Size", value: appearance.head.nose_size, onChange: (v) => onUpdate("head.nose_size", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Nose" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.nose_style, count: STYLE_COUNTS.nose, onChange: (v) => onUpdate("head.nose_style", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.nose_y, onChange: (v) => onUpdate("head.nose_y", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Size", value: appearance.head.nose_size, onChange: (v) => onUpdate("head.nose_size", v) })
   ] });
 }
 function MouthTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Mouth" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.mouth_style, count: STYLE_COUNTS.mouth, onChange: (v) => onUpdate("head.mouth_style", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.mouth_y, onChange: (v) => onUpdate("head.mouth_y", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider, { label: "Size", value: appearance.head.mouth_size, onChange: (v) => onUpdate("head.mouth_size", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Mouth" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.mouth_style, count: STYLE_COUNTS.mouth, onChange: (v) => onUpdate("head.mouth_style", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Vertical Pos", value: appearance.head.mouth_y, onChange: (v) => onUpdate("head.mouth_y", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slider, { label: "Size", value: appearance.head.mouth_size, onChange: (v) => onUpdate("head.mouth_size", v) })
   ] });
 }
 function HairTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Hair" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.hair_style, count: STYLE_COUNTS.hair, onChange: (v) => onUpdate("head.hair_style", v) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Colour" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourPresets, { current: appearance.head.hair_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.hair_color", c) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Hair" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.hair_style, count: STYLE_COUNTS.hair, onChange: (v) => onUpdate("head.hair_style", v) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Colour" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColourPresets, { current: appearance.head.hair_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.hair_color", c) })
   ] });
 }
 function ExtrasTab({ appearance, onUpdate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Facial Hair" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.facial_hair_style, count: STYLE_COUNTS.facial_hair, onChange: (v) => onUpdate("head.facial_hair_style", v) }),
-    appearance.head.facial_hair_style > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColourPresets, { current: appearance.head.facial_hair_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.facial_hair_color", c) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionLabel, { children: "Glasses" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleSelector, { label: "Style", value: appearance.head.glasses_style, count: STYLE_COUNTS.glasses, onChange: (v) => onUpdate("head.glasses_style", v) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Facial Hair" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.facial_hair_style, count: STYLE_COUNTS.facial_hair, onChange: (v) => onUpdate("head.facial_hair_style", v) }),
+    appearance.head.facial_hair_style > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColourPresets, { current: appearance.head.facial_hair_color, presets: HAIR_COLOR_PRESETS, onPick: (c) => onUpdate("head.facial_hair_color", c) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionLabel, { children: "Glasses" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyleSelector, { label: "Style", value: appearance.head.glasses_style, count: STYLE_COUNTS.glasses, onChange: (v) => onUpdate("head.glasses_style", v) })
   ] });
 }
 function SectionLabel({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#ccc", fontWeight: 600, fontSize: 13, margin: "8px 0 4px" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#ccc", fontWeight: 600, fontSize: 13, margin: "8px 0 4px" }, children });
 }
 function Slider({
   label,
@@ -343,9 +633,9 @@ function Slider({
   max = 1,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sliderRowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { minWidth: 90, color: "#aab" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: sliderRowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { minWidth: 90, color: "#aab" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
         type: "range",
@@ -357,7 +647,7 @@ function Slider({
         style: { flex: 1 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { minWidth: 40, textAlign: "right", color: "#889", fontSize: 12 }, children: value.toFixed(2) })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { minWidth: 40, textAlign: "right", color: "#889", fontSize: 12 }, children: value.toFixed(2) })
   ] });
 }
 function StyleSelector({
@@ -366,15 +656,15 @@ function StyleSelector({
   count,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, margin: "4px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#aab", minWidth: 50 }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: smallBtnStyle, onClick: () => onChange(Math.max(0, value - 1)), disabled: value <= 0, children: "<" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "#fff", minWidth: 40, textAlign: "center" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, margin: "4px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#aab", minWidth: 50 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: smallBtnStyle, onClick: () => onChange(Math.max(0, value - 1)), disabled: value <= 0, children: "<" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "#fff", minWidth: 40, textAlign: "center" }, children: [
       value + 1,
       "/",
       count
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: smallBtnStyle, onClick: () => onChange(Math.min(count - 1, value + 1)), disabled: value >= count - 1, children: ">" })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: smallBtnStyle, onClick: () => onChange(Math.min(count - 1, value + 1)), disabled: value >= count - 1, children: ">" })
   ] });
 }
 function ColourPresets({
@@ -382,9 +672,9 @@ function ColourPresets({
   presets,
   onPick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, margin: "4px 0" }, children: presets.map((p, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, margin: "4px 0" }, children: presets.map((p, i) => {
     const selected = Math.abs(current[0] - p[0]) < 0.01 && Math.abs(current[1] - p[1]) < 0.01 && Math.abs(current[2] - p[2]) < 0.01;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         onClick: () => onPick([...p]),
@@ -410,7 +700,24 @@ var rootStyle = {
   borderRadius: 8,
   overflow: "hidden",
   fontFamily: "system-ui, sans-serif",
-  fontSize: 14
+  fontSize: 14,
+  minHeight: 400
+};
+var mainStyle = {
+  display: "flex",
+  flex: 1,
+  minHeight: 0
+};
+var previewPaneStyle = {
+  flex: "0 0 45%",
+  minHeight: 280,
+  borderRight: "1px solid #2a2a38"
+};
+var controlsPaneStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0
 };
 var headerStyle = {
   display: "flex",
@@ -470,7 +777,60 @@ var sliderRowStyle = {
   gap: 8,
   margin: "4px 0"
 };
+
+// src/components/AvatarPreview.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AvatarPreview({
+  appearance,
+  size = 200,
+  autoRotate = true,
+  background,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    AvatarRenderer,
+    {
+      appearance,
+      width: size,
+      height: size,
+      autoRotate,
+      background,
+      className,
+      style: { borderRadius: 8, ...style }
+    }
+  );
+}
+
+// src/components/AvatarThumbnail.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AvatarThumbnail({
+  appearance,
+  size = 48,
+  background = "#1a1a26",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    AvatarRenderer,
+    {
+      appearance,
+      width: size,
+      height: size,
+      autoRotate: false,
+      background,
+      className,
+      style: {
+        borderRadius: "50%",
+        ...style
+      }
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AvatarEditor
+  AvatarEditor,
+  AvatarPreview,
+  AvatarRenderer,
+  AvatarThumbnail
 });