@pixygon/avatar 1.0.0 → 1.1.0

package/dist/chunk-OD5OQB7A.mjs

@@ -0,0 +1,390 @@
+// src/types/index.ts
+var STYLE_COUNTS = {
+  eye: 12,
+  brow: 8,
+  nose: 8,
+  mouth: 8,
+  hair: 16,
+  facial_hair: 8,
+  glasses: 6
+};
+
+// src/presets.ts
+var SKIN_PRESETS = [
+  [0.98, 0.89, 0.78],
+  // Porcelain
+  [0.96, 0.84, 0.71],
+  // Fair
+  [0.92, 0.78, 0.63],
+  // Light
+  [0.87, 0.72, 0.55],
+  // Medium-light
+  [0.78, 0.62, 0.46],
+  // Medium
+  [0.68, 0.51, 0.36],
+  // Olive
+  [0.58, 0.42, 0.3],
+  // Tan
+  [0.47, 0.33, 0.22],
+  // Brown
+  [0.36, 0.24, 0.16],
+  // Dark
+  [0.26, 0.17, 0.11]
+  // Deep
+];
+var EYE_COLOR_PRESETS = [
+  [0.1, 0.1, 0.1],
+  // Black
+  [0.35, 0.22, 0.1],
+  // Brown
+  [0.55, 0.35, 0.15],
+  // Hazel
+  [0.25, 0.5, 0.25],
+  // Green
+  [0.2, 0.4, 0.7],
+  // Blue
+  [0.45, 0.45, 0.5],
+  // Gray
+  [0.55, 0.25, 0.25],
+  // Red
+  [0.5, 0.3, 0.6]
+  // Violet
+];
+var HAIR_COLOR_PRESETS = [
+  [0.08, 0.06, 0.05],
+  // Black
+  [0.22, 0.14, 0.08],
+  // Dark brown
+  [0.4, 0.26, 0.14],
+  // Brown
+  [0.58, 0.42, 0.24],
+  // Light brown
+  [0.78, 0.62, 0.34],
+  // Dirty blonde
+  [0.9, 0.78, 0.48],
+  // Blonde
+  [0.72, 0.26, 0.12],
+  // Red
+  [0.88, 0.52, 0.22],
+  // Ginger
+  [0.6, 0.6, 0.62],
+  // Gray
+  [0.92, 0.92, 0.94]
+  // White
+];
+
+// src/defaults.ts
+function defaultAppearance() {
+  return {
+    body: { height: 0.5, build: 0.5 },
+    head: {
+      width: 1,
+      height: 1,
+      eye_style: 0,
+      eye_color: [...EYE_COLOR_PRESETS[1]],
+      eye_y: 0.5,
+      eye_spacing: 0.5,
+      eye_size: 0.5,
+      eye_rotation: 0.5,
+      brow_style: 0,
+      brow_color: [...HAIR_COLOR_PRESETS[0]],
+      brow_y: 0.5,
+      brow_spacing: 0.5,
+      brow_size: 0.5,
+      brow_rotation: 0.5,
+      nose_style: 0,
+      nose_y: 0.5,
+      nose_size: 0.5,
+      mouth_style: 0,
+      mouth_y: 0.5,
+      mouth_size: 0.5,
+      mouth_color: [0.75, 0.35, 0.35],
+      hair_style: 0,
+      hair_color: [...HAIR_COLOR_PRESETS[2]],
+      facial_hair_style: 0,
+      facial_hair_color: [...HAIR_COLOR_PRESETS[0]],
+      glasses_style: 0,
+      glasses_color: [0.1, 0.1, 0.1]
+    },
+    skin_color: [...SKIN_PRESETS[2]]
+  };
+}
+function randomAppearance() {
+  const rng = (min, max) => min + Math.random() * (max - min);
+  const rngInt = (max) => Math.floor(Math.random() * max);
+  const pick = (arr) => arr[rngInt(arr.length)];
+  const hairColor = pick(HAIR_COLOR_PRESETS);
+  return {
+    body: {
+      height: rng(0.2, 0.8),
+      build: rng(0.2, 0.8)
+    },
+    head: {
+      width: rng(0.7, 1.3),
+      height: rng(0.7, 1.3),
+      eye_style: rngInt(STYLE_COUNTS.eye),
+      eye_color: [...pick(EYE_COLOR_PRESETS)],
+      eye_y: rng(0.3, 0.7),
+      eye_spacing: rng(0.3, 0.7),
+      eye_size: rng(0.3, 0.7),
+      eye_rotation: 0.5,
+      brow_style: rngInt(STYLE_COUNTS.brow),
+      brow_color: [...hairColor],
+      brow_y: rng(0.3, 0.7),
+      brow_spacing: rng(0.3, 0.7),
+      brow_size: rng(0.3, 0.7),
+      brow_rotation: 0.5,
+      nose_style: rngInt(STYLE_COUNTS.nose),
+      nose_y: rng(0.3, 0.7),
+      nose_size: rng(0.3, 0.7),
+      mouth_style: rngInt(STYLE_COUNTS.mouth),
+      mouth_y: rng(0.3, 0.7),
+      mouth_size: rng(0.3, 0.7),
+      mouth_color: [0.75, 0.35, 0.35],
+      hair_style: rngInt(STYLE_COUNTS.hair),
+      hair_color: [...hairColor],
+      facial_hair_style: Math.random() < 0.3 ? 1 + rngInt(STYLE_COUNTS.facial_hair - 1) : 0,
+      facial_hair_color: [...hairColor],
+      glasses_style: Math.random() < 0.2 ? 1 + rngInt(STYLE_COUNTS.glasses - 1) : 0,
+      glasses_color: [0.1, 0.1, 0.1]
+    },
+    skin_color: [...pick(SKIN_PRESETS)]
+  };
+}
+
+// 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/hooks/useAvatarEditor.ts
+import { useCallback, useState } from "react";
+function useAvatarEditor(initial) {
+  const [appearance, setAppearance] = useState(
+    () => initial ?? defaultAppearance()
+  );
+  const [tab, setTab] = useState("body");
+  const update = useCallback((path, value) => {
+    setAppearance((prev) => {
+      const next = structuredClone(prev);
+      const parts = path.split(".");
+      let obj = next;
+      for (let i = 0; i < parts.length - 1; i++) {
+        obj = obj[parts[i]];
+      }
+      obj[parts[parts.length - 1]] = value;
+      return next;
+    });
+  }, []);
+  const randomize = useCallback(() => setAppearance(randomAppearance()), []);
+  const reset = useCallback(() => setAppearance(initial ?? defaultAppearance()), [initial]);
+  return { appearance, tab, setTab, update, randomize, reset };
+}
+
+// src/utils/geometry.ts
+import * as THREE from "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;
+}
+function buildAvatarGroup(appearance) {
+  const { bones, head } = buildSkeleton(appearance.body);
+  const skinColor = new THREE.Color(...appearance.skin_color);
+  const material = new THREE.MeshStandardMaterial({
+    color: skinColor,
+    roughness: 0.7,
+    metalness: 0.05
+  });
+  const group = new THREE.Group();
+  for (const bone of bones) {
+    const geo = capsuleBetweenGeometry(bone.start, bone.end, bone.radius);
+    group.add(new THREE.Mesh(geo, material));
+  }
+  const headGeo = ellipsoidGeometry(
+    head.radius_x * appearance.head.width,
+    head.radius_y * appearance.head.height,
+    head.radius_z * appearance.head.width
+  );
+  const headMesh = new THREE.Mesh(headGeo, material);
+  headMesh.position.set(...head.center);
+  group.add(headMesh);
+  return group;
+}
+
+export {
+  STYLE_COUNTS,
+  SKIN_PRESETS,
+  EYE_COLOR_PRESETS,
+  HAIR_COLOR_PRESETS,
+  defaultAppearance,
+  randomAppearance,
+  buildSkeleton,
+  useAvatarEditor,
+  capsuleBetweenGeometry,
+  ellipsoidGeometry,
+  buildAvatarGroup
+};

package/dist/components/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { A as AvatarAppearance } from '../index-DwPxw0AI.mjs';
+import React from 'react';
 
 interface AvatarEditorProps {
     /** Initial appearance (uses default if omitted). */
@@ -15,4 +16,45 @@ interface AvatarEditorProps {
 }
 declare function AvatarEditor({ initial, onChange, onDone, onCancel, className, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
 
-export { AvatarEditor, type AvatarEditorProps };
+interface AvatarRendererProps {
+    appearance: AvatarAppearance;
+    /** Width of the canvas (CSS). Default: '100%'. */
+    width?: string | number;
+    /** Height of the canvas (CSS). Default: 300. */
+    height?: string | number;
+    /** Auto-rotate the camera. Default: false. */
+    autoRotate?: boolean;
+    /** Background colour. Default: '#15151f'. */
+    background?: string;
+    /** Optional CSS class. */
+    className?: string;
+    /** Optional inline style for the container. */
+    style?: React.CSSProperties;
+}
+declare function AvatarRenderer({ appearance, width, height, autoRotate, background, className, style, }: AvatarRendererProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarPreviewProps {
+    appearance: AvatarAppearance;
+    /** Size in px. Default: 200. */
+    size?: number;
+    /** Auto-rotate. Default: true. */
+    autoRotate?: boolean;
+    /** Background colour. */
+    background?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function AvatarPreview({ appearance, size, autoRotate, background, className, style, }: AvatarPreviewProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarThumbnailProps {
+    appearance: AvatarAppearance;
+    /** Diameter in px. Default: 48. */
+    size?: number;
+    /** Background colour. Default: '#1a1a26'. */
+    background?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function AvatarThumbnail({ appearance, size, background, className, style, }: AvatarThumbnailProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarEditor, type AvatarEditorProps, AvatarPreview, type AvatarPreviewProps, AvatarRenderer, type AvatarRendererProps, AvatarThumbnail, type AvatarThumbnailProps };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { A as AvatarAppearance } from '../index-DwPxw0AI.js';
+import React from 'react';
 
 interface AvatarEditorProps {
     /** Initial appearance (uses default if omitted). */
@@ -15,4 +16,45 @@ interface AvatarEditorProps {
 }
 declare function AvatarEditor({ initial, onChange, onDone, onCancel, className, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
 
-export { AvatarEditor, type AvatarEditorProps };
+interface AvatarRendererProps {
+    appearance: AvatarAppearance;
+    /** Width of the canvas (CSS). Default: '100%'. */
+    width?: string | number;
+    /** Height of the canvas (CSS). Default: 300. */
+    height?: string | number;
+    /** Auto-rotate the camera. Default: false. */
+    autoRotate?: boolean;
+    /** Background colour. Default: '#15151f'. */
+    background?: string;
+    /** Optional CSS class. */
+    className?: string;
+    /** Optional inline style for the container. */
+    style?: React.CSSProperties;
+}
+declare function AvatarRenderer({ appearance, width, height, autoRotate, background, className, style, }: AvatarRendererProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarPreviewProps {
+    appearance: AvatarAppearance;
+    /** Size in px. Default: 200. */
+    size?: number;
+    /** Auto-rotate. Default: true. */
+    autoRotate?: boolean;
+    /** Background colour. */
+    background?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function AvatarPreview({ appearance, size, autoRotate, background, className, style, }: AvatarPreviewProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarThumbnailProps {
+    appearance: AvatarAppearance;
+    /** Diameter in px. Default: 48. */
+    size?: number;
+    /** Background colour. Default: '#1a1a26'. */
+    background?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function AvatarThumbnail({ appearance, size, background, className, style, }: AvatarThumbnailProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarEditor, type AvatarEditorProps, AvatarPreview, type AvatarPreviewProps, AvatarRenderer, type AvatarRendererProps, AvatarThumbnail, type AvatarThumbnailProps };