@pixygon/avatar 1.0.0

package/src/components/AvatarEditor.tsx

@@ -0,0 +1,371 @@
+import React from 'react'
+import type { AvatarAppearance, Colour3 } from '../types'
+import { STYLE_COUNTS } from '../types'
+import { SKIN_PRESETS, EYE_COLOR_PRESETS, HAIR_COLOR_PRESETS } from '../presets'
+import { useAvatarEditor, type AvatarEditorTab } from '../hooks/useAvatarEditor'
+
+// ── Public API ──────────────────────────────────────────────────────────────
+
+export interface AvatarEditorProps {
+  /** Initial appearance (uses default if omitted). */
+  initial?: AvatarAppearance
+  /** Called whenever the appearance changes. */
+  onChange?: (appearance: AvatarAppearance) => void
+  /** Called when the user clicks "Done". */
+  onDone?: (appearance: AvatarAppearance) => void
+  /** Called when the user clicks "Cancel". */
+  onCancel?: () => void
+  /** Optional class name for the root container. */
+  className?: string
+}
+
+const TABS: { key: AvatarEditorTab; label: string }[] = [
+  { key: 'body', label: 'Body' },
+  { key: 'head', label: 'Head' },
+  { key: 'eyes', label: 'Eyes' },
+  { key: 'brows', label: 'Brows' },
+  { key: 'nose', label: 'Nose' },
+  { key: 'mouth', label: 'Mouth' },
+  { key: 'hair', label: 'Hair' },
+  { key: 'extras', label: 'Extras' },
+]
+
+export function AvatarEditor({
+  initial,
+  onChange,
+  onDone,
+  onCancel,
+  className,
+}: AvatarEditorProps) {
+  const { appearance, tab, setTab, update, randomize, reset } = useAvatarEditor(initial)
+
+  // Notify parent on every change
+  const handleUpdate = (path: string, value: number | Colour3) => {
+    update(path, value)
+    // We can't access the *new* state synchronously after update,
+    // so we schedule the callback on next tick.
+    setTimeout(() => onChange?.(appearance), 0)
+  }
+
+  return (
+    <div className={className} style={rootStyle}>
+      {/* Header */}
+      <div style={headerStyle}>
+        <span style={{ fontWeight: 700, fontSize: 18 }}>Avatar Editor</span>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button style={btnStyle} onClick={randomize}>Randomize</button>
+          <button style={btnStyle} onClick={reset}>Reset</button>
+          {onCancel && <button style={btnStyle} onClick={onCancel}>Cancel</button>}
+          {onDone && (
+            <button style={{ ...btnStyle, background: '#3b6' }} onClick={() => onDone(appearance)}>
+              Done
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Tab bar */}
+      <div style={tabBarStyle}>
+        {TABS.map(t => (
+          <button
+            key={t.key}
+            onClick={() => setTab(t.key)}
+            style={{
+              ...tabStyle,
+              ...(tab === t.key ? tabActiveStyle : {}),
+            }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div style={contentStyle}>
+        {tab === 'body' && <BodyTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'head' && <HeadTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'eyes' && <EyesTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'brows' && <BrowsTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'nose' && <NoseTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'mouth' && <MouthTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'hair' && <HairTab appearance={appearance} onUpdate={handleUpdate} />}
+        {tab === 'extras' && <ExtrasTab appearance={appearance} onUpdate={handleUpdate} />}
+      </div>
+    </div>
+  )
+}
+
+// ── Tab panels ──────────────────────────────────────────────────────────────
+
+type UpdateFn = (path: string, value: number | Colour3) => void
+
+function BodyTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Body</SectionLabel>
+      <Slider label="Height" value={appearance.body.height} onChange={v => onUpdate('body.height', v)} />
+      <Slider label="Build" value={appearance.body.build} onChange={v => onUpdate('body.build', v)} />
+      <SectionLabel>Skin Colour</SectionLabel>
+      <ColourPresets current={appearance.skin_color} presets={SKIN_PRESETS} onPick={c => onUpdate('skin_color', c)} />
+    </>
+  )
+}
+
+function HeadTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Head Shape</SectionLabel>
+      <Slider label="Width" value={appearance.head.width} min={0.5} max={1.5} onChange={v => onUpdate('head.width', v)} />
+      <Slider label="Height" value={appearance.head.height} min={0.5} max={1.5} onChange={v => onUpdate('head.height', v)} />
+    </>
+  )
+}
+
+function EyesTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Eyes</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.eye_style} count={STYLE_COUNTS.eye} onChange={v => onUpdate('head.eye_style', v)} />
+      <ColourPresets current={appearance.head.eye_color} presets={EYE_COLOR_PRESETS} onPick={c => onUpdate('head.eye_color', c)} />
+      <Slider label="Vertical Pos" value={appearance.head.eye_y} onChange={v => onUpdate('head.eye_y', v)} />
+      <Slider label="Spacing" value={appearance.head.eye_spacing} onChange={v => onUpdate('head.eye_spacing', v)} />
+      <Slider label="Size" value={appearance.head.eye_size} onChange={v => onUpdate('head.eye_size', v)} />
+      <Slider label="Rotation" value={appearance.head.eye_rotation} onChange={v => onUpdate('head.eye_rotation', v)} />
+    </>
+  )
+}
+
+function BrowsTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Eyebrows</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.brow_style} count={STYLE_COUNTS.brow} onChange={v => onUpdate('head.brow_style', v)} />
+      <ColourPresets current={appearance.head.brow_color} presets={HAIR_COLOR_PRESETS} onPick={c => onUpdate('head.brow_color', c)} />
+      <Slider label="Vertical Pos" value={appearance.head.brow_y} onChange={v => onUpdate('head.brow_y', v)} />
+      <Slider label="Spacing" value={appearance.head.brow_spacing} onChange={v => onUpdate('head.brow_spacing', v)} />
+      <Slider label="Size" value={appearance.head.brow_size} onChange={v => onUpdate('head.brow_size', v)} />
+      <Slider label="Rotation" value={appearance.head.brow_rotation} onChange={v => onUpdate('head.brow_rotation', v)} />
+    </>
+  )
+}
+
+function NoseTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Nose</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.nose_style} count={STYLE_COUNTS.nose} onChange={v => onUpdate('head.nose_style', v)} />
+      <Slider label="Vertical Pos" value={appearance.head.nose_y} onChange={v => onUpdate('head.nose_y', v)} />
+      <Slider label="Size" value={appearance.head.nose_size} onChange={v => onUpdate('head.nose_size', v)} />
+    </>
+  )
+}
+
+function MouthTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Mouth</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.mouth_style} count={STYLE_COUNTS.mouth} onChange={v => onUpdate('head.mouth_style', v)} />
+      <Slider label="Vertical Pos" value={appearance.head.mouth_y} onChange={v => onUpdate('head.mouth_y', v)} />
+      <Slider label="Size" value={appearance.head.mouth_size} onChange={v => onUpdate('head.mouth_size', v)} />
+    </>
+  )
+}
+
+function HairTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Hair</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.hair_style} count={STYLE_COUNTS.hair} onChange={v => onUpdate('head.hair_style', v)} />
+      <SectionLabel>Colour</SectionLabel>
+      <ColourPresets current={appearance.head.hair_color} presets={HAIR_COLOR_PRESETS} onPick={c => onUpdate('head.hair_color', c)} />
+    </>
+  )
+}
+
+function ExtrasTab({ appearance, onUpdate }: { appearance: AvatarAppearance; onUpdate: UpdateFn }) {
+  return (
+    <>
+      <SectionLabel>Facial Hair</SectionLabel>
+      <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 && (
+        <ColourPresets current={appearance.head.facial_hair_color} presets={HAIR_COLOR_PRESETS} onPick={c => onUpdate('head.facial_hair_color', c)} />
+      )}
+      <SectionLabel>Glasses</SectionLabel>
+      <StyleSelector label="Style" value={appearance.head.glasses_style} count={STYLE_COUNTS.glasses} onChange={v => onUpdate('head.glasses_style', v)} />
+    </>
+  )
+}
+
+// ── Reusable controls ───────────────────────────────────────────────────────
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <div style={{ color: '#ccc', fontWeight: 600, fontSize: 13, margin: '8px 0 4px' }}>{children}</div>
+}
+
+function Slider({
+  label,
+  value,
+  min = 0,
+  max = 1,
+  onChange,
+}: {
+  label: string
+  value: number
+  min?: number
+  max?: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <label style={sliderRowStyle}>
+      <span style={{ minWidth: 90, color: '#aab' }}>{label}</span>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={0.01}
+        value={value}
+        onChange={e => onChange(parseFloat(e.target.value))}
+        style={{ flex: 1 }}
+      />
+      <span style={{ minWidth: 40, textAlign: 'right', color: '#889', fontSize: 12 }}>
+        {value.toFixed(2)}
+      </span>
+    </label>
+  )
+}
+
+function StyleSelector({
+  label,
+  value,
+  count,
+  onChange,
+}: {
+  label: string
+  value: number
+  count: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 0' }}>
+      <span style={{ color: '#aab', minWidth: 50 }}>{label}</span>
+      <button style={smallBtnStyle} onClick={() => onChange(Math.max(0, value - 1))} disabled={value <= 0}>&lt;</button>
+      <span style={{ color: '#fff', minWidth: 40, textAlign: 'center' }}>{value + 1}/{count}</span>
+      <button style={smallBtnStyle} onClick={() => onChange(Math.min(count - 1, value + 1))} disabled={value >= count - 1}>&gt;</button>
+    </div>
+  )
+}
+
+function ColourPresets({
+  current,
+  presets,
+  onPick,
+}: {
+  current: Colour3
+  presets: readonly Colour3[]
+  onPick: (c: Colour3) => void
+}) {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, margin: '4px 0' }}>
+      {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 (
+          <button
+            key={i}
+            onClick={() => onPick([...p])}
+            style={{
+              width: selected ? 26 : 22,
+              height: selected ? 26 : 22,
+              borderRadius: 4,
+              border: selected ? '2px solid #fff' : '1px solid #555',
+              background: `rgb(${p[0] * 255}, ${p[1] * 255}, ${p[2] * 255})`,
+              cursor: 'pointer',
+              padding: 0,
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+// ── Inline styles ───────────────────────────────────────────────────────────
+
+const rootStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  background: '#1e1e2a',
+  color: '#ddd',
+  borderRadius: 8,
+  overflow: 'hidden',
+  fontFamily: 'system-ui, sans-serif',
+  fontSize: 14,
+}
+
+const headerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '10px 14px',
+  background: '#16161f',
+}
+
+const tabBarStyle: React.CSSProperties = {
+  display: 'flex',
+  gap: 2,
+  padding: '0 8px',
+  background: '#1a1a26',
+  overflowX: 'auto',
+}
+
+const tabStyle: React.CSSProperties = {
+  padding: '8px 12px',
+  background: 'transparent',
+  border: 'none',
+  color: '#99a',
+  cursor: 'pointer',
+  fontSize: 13,
+  whiteSpace: 'nowrap',
+}
+
+const tabActiveStyle: React.CSSProperties = {
+  color: '#fff',
+  fontWeight: 700,
+  borderBottom: '2px solid #6af',
+}
+
+const contentStyle: React.CSSProperties = {
+  padding: '8px 14px 14px',
+  overflowY: 'auto',
+  flex: 1,
+}
+
+const btnStyle: React.CSSProperties = {
+  padding: '6px 14px',
+  border: 'none',
+  borderRadius: 4,
+  background: '#333',
+  color: '#ddd',
+  cursor: 'pointer',
+  fontSize: 13,
+}
+
+const smallBtnStyle: React.CSSProperties = {
+  width: 28,
+  height: 28,
+  border: '1px solid #444',
+  borderRadius: 4,
+  background: '#2a2a36',
+  color: '#ccc',
+  cursor: 'pointer',
+  fontSize: 14,
+}
+
+const sliderRowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  margin: '4px 0',
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @pixygon/avatar/components
+ *
+ * React components for avatar customisation.
+ */
+export { AvatarEditor } from './AvatarEditor'
+export type { AvatarEditorProps } from './AvatarEditor'

package/src/defaults.ts

@@ -0,0 +1,89 @@
+/**
+ * Default avatar appearance + randomiser.
+ */
+import type { AvatarAppearance } from './types'
+import { SKIN_PRESETS, EYE_COLOR_PRESETS, HAIR_COLOR_PRESETS } from './presets'
+import { STYLE_COUNTS } from './types'
+
+/** Default avatar (matches Rust Default impl). */
+export function defaultAppearance(): AvatarAppearance {
+  return {
+    body: { height: 0.5, build: 0.5 },
+    head: {
+      width: 1.0,
+      height: 1.0,
+      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]],
+  }
+}
+
+/** Generate a random avatar appearance. */
+export function randomAppearance(): AvatarAppearance {
+  const rng = (min: number, max: number) => min + Math.random() * (max - min)
+  const rngInt = (max: number) => Math.floor(Math.random() * max)
+  const pick = <T>(arr: readonly T[]): T => 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)],
+  }
+}

package/src/hooks/useAvatarEditor.ts

@@ -0,0 +1,41 @@
+import { useCallback, useState } from 'react'
+import type { AvatarAppearance, Colour3 } from '../types'
+import { defaultAppearance, randomAppearance } from '../defaults'
+
+export type AvatarEditorTab = 'body' | 'head' | 'eyes' | 'brows' | 'nose' | 'mouth' | 'hair' | 'extras'
+
+export interface UseAvatarEditorReturn {
+  appearance: AvatarAppearance
+  tab: AvatarEditorTab
+  setTab: (tab: AvatarEditorTab) => void
+  /** Update a nested field.  path examples: 'body.height', 'head.eye_y', 'skin_color' */
+  update: (path: string, value: number | Colour3) => void
+  randomize: () => void
+  reset: () => void
+}
+
+export function useAvatarEditor(initial?: AvatarAppearance): UseAvatarEditorReturn {
+  const [appearance, setAppearance] = useState<AvatarAppearance>(
+    () => initial ?? defaultAppearance(),
+  )
+  const [tab, setTab] = useState<AvatarEditorTab>('body')
+
+  const update = useCallback((path: string, value: number | Colour3) => {
+    setAppearance(prev => {
+      const next = structuredClone(prev)
+      const parts = path.split('.')
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let obj: any = 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 }
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+/**
+ * @pixygon/avatar
+ *
+ * Universal avatar system for all Pixygon applications.
+ *
+ * Usage (types + utilities):
+ *   import { defaultAppearance, randomAppearance, buildSkeleton } from '@pixygon/avatar'
+ *   import type { AvatarAppearance } from '@pixygon/avatar'
+ *
+ * Usage (React editor):
+ *   import { AvatarEditor } from '@pixygon/avatar/components'
+ */
+
+// Types
+export type {
+  AvatarAppearance,
+  AvatarBody,
+  AvatarHead,
+  Colour3,
+  BoneSegment,
+  HeadInfo,
+} from './types'
+export { STYLE_COUNTS } from './types'
+
+// Presets
+export { SKIN_PRESETS, EYE_COLOR_PRESETS, HAIR_COLOR_PRESETS } from './presets'
+
+// Defaults & randomisation
+export { defaultAppearance, randomAppearance } from './defaults'
+
+// Skeleton builder
+export { buildSkeleton } from './skeleton'
+
+// Editor hook (usable without the component)
+export { useAvatarEditor } from './hooks/useAvatarEditor'
+export type { AvatarEditorTab, UseAvatarEditorReturn } from './hooks/useAvatarEditor'

package/src/presets.ts

@@ -0,0 +1,44 @@
+/**
+ * Colour presets — mirrors the Rust constants from infinite-game/src/avatar/mod.rs.
+ */
+import type { Colour3 } from './types'
+
+/** 10 skin colour presets (light to dark). */
+export const SKIN_PRESETS: readonly Colour3[] = [
+  [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.30], // Tan
+  [0.47, 0.33, 0.22], // Brown
+  [0.36, 0.24, 0.16], // Dark
+  [0.26, 0.17, 0.11], // Deep
+]
+
+/** 8 eye colour presets. */
+export const EYE_COLOR_PRESETS: readonly Colour3[] = [
+  [0.10, 0.10, 0.10], // Black
+  [0.35, 0.22, 0.10], // Brown
+  [0.55, 0.35, 0.15], // Hazel
+  [0.25, 0.50, 0.25], // Green
+  [0.20, 0.40, 0.70], // Blue
+  [0.45, 0.45, 0.50], // Gray
+  [0.55, 0.25, 0.25], // Red
+  [0.50, 0.30, 0.60], // Violet
+]
+
+/** 10 hair colour presets. */
+export const HAIR_COLOR_PRESETS: readonly Colour3[] = [
+  [0.08, 0.06, 0.05], // Black
+  [0.22, 0.14, 0.08], // Dark brown
+  [0.40, 0.26, 0.14], // Brown
+  [0.58, 0.42, 0.24], // Light brown
+  [0.78, 0.62, 0.34], // Dirty blonde
+  [0.90, 0.78, 0.48], // Blonde
+  [0.72, 0.26, 0.12], // Red
+  [0.88, 0.52, 0.22], // Ginger
+  [0.60, 0.60, 0.62], // Gray
+  [0.92, 0.92, 0.94], // White
+]

package/src/skeleton.ts

@@ -0,0 +1,82 @@
+/**
+ * Humanoid skeleton builder — TypeScript port of
+ * infinite-game/src/avatar/mod.rs `build_skeleton()`.
+ */
+import type { AvatarBody, BoneSegment, HeadInfo } from './types'
+
+function mirrorX(p: [number, number, number]): [number, number, number] {
+  return [-p[0], p[1], p[2]]
+}
+
+/**
+ * Build a humanoid capsule skeleton from body parameters.
+ *
+ * Returns 16 bone segments (4 torso + 6 arm + 6 leg) and a head ellipsoid.
+ * The character stands at the origin with feet on y = 0.
+ */
+export function buildSkeleton(body: AvatarBody): {
+  bones: BoneSegment[]
+  head: HeadInfo
+} {
+  const h = 0.85 + body.height * 0.35 // 0.85 – 1.20
+  const b = 0.75 + body.build * 0.50 // 0.75 – 1.25
+
+  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.30 * 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: BoneSegment[] = []
+
+  // Torso
+  bones.push({ start: [0, hipY, 0], end: [0, waistY, 0], radius: 0.10 * 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 })
+
+  // Left arm
+  const lShoulder: [number, number, number] = [shoulderSpread, shoulderY, 0]
+  const lElbow: [number, number, number] = [shoulderSpread + 0.22 * h, shoulderY - 0.08 * h, 0]
+  const lWrist: [number, number, number] = [shoulderSpread + 0.42 * h, shoulderY - 0.18 * h, 0]
+  const lHand: [number, number, number] = [shoulderSpread + 0.50 * h, shoulderY - 0.22 * h, 0]
+  bones.push({ start: lShoulder, end: lElbow, radius: 0.040 * b })
+  bones.push({ start: lElbow, end: lWrist, radius: 0.035 * b })
+  bones.push({ start: lWrist, end: lHand, radius: 0.030 * b })
+
+  // Right arm (mirror)
+  bones.push({ start: mirrorX(lShoulder), end: mirrorX(lElbow), radius: 0.040 * b })
+  bones.push({ start: mirrorX(lElbow), end: mirrorX(lWrist), radius: 0.035 * b })
+  bones.push({ start: mirrorX(lWrist), end: mirrorX(lHand), radius: 0.030 * b })
+
+  // Left leg
+  const lHip: [number, number, number] = [hipSpread, hipY, 0]
+  const lKnee: [number, number, number] = [hipSpread + 0.01, kneeY, 0]
+  const lAnkle: [number, number, number] = [hipSpread, ankleY, 0]
+  const lToe: [number, number, number] = [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 })
+
+  // Right leg (mirror)
+  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: HeadInfo = {
+    center: [0, headCenterY, 0],
+    radius_x: 0.11,
+    radius_y: 0.12,
+    radius_z: 0.10,
+  }
+
+  return { bones, head }
+}