talking-head-studio 0.2.6 → 0.2.8

package/README.md

@@ -4,7 +4,7 @@
 
 [![npm version](https://img.shields.io/npm/v/talking-head-studio.svg)](https://www.npmjs.com/package/talking-head-studio)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![Build Status](https://github.com/sitebay/react-native-talking-head/actions/workflows/ci.yml/badge.svg)](https://github.com/sitebay/react-native-talking-head/actions)
+[![Build Status](https://github.com/sitebay/talking-head-studio/actions/workflows/ci.yml/badge.svg)](https://github.com/sitebay/talking-head-studio/actions)
 
 ---
 
@@ -52,7 +52,7 @@ npm install talking-head-studio react-native-webview
 npm install talking-head-studio
 ```
 
-No WebView dependency needed. The package ships a `.web.tsx` entry point that renders via `<iframe srcdoc>` automatically when bundled for web targets.
+No `react-native` or WebView runtime dependency needed. The package ships a web entry point that renders via `<iframe srcdoc>` automatically when bundled for browser targets.
 
 ---
 
@@ -100,7 +100,8 @@ The package ships five independent entry points. Import only what you need — e
 ### `talking-head-studio` — Live talking avatar
 ```tsx
 import { TalkingHead } from 'talking-head-studio';
-// Peer deps: react, react-native (optional), react-native-webview (optional)
+// Peer deps: react
+// Native-only peers: react-native (optional), react-native-webview (optional)
 ```
 
 ### `talking-head-studio/editor` — 3D editor with gizmo (web)
@@ -398,7 +399,7 @@ For detailed model authoring guidance, see the [TalkingHead documentation](https
 
 ## Plain React / Next.js
 
-Despite the package name, this works on the web without React Native installed. The `react-native` and `react-native-webview` peer dependencies are both marked optional.
+This works on the web without `react-native` or `react-native-webview` installed at runtime.
 
 On web, the component renders an `<iframe>` with `srcdoc` containing the full Three.js scene. No WebView, no native modules, no build plugins.
 
@@ -417,7 +418,7 @@ export default function Page() {
 }
 ```
 
-Bundlers that support the `react-native` platform field (Metro, Expo) resolve `TalkingHead.tsx` (WebView). Standard web bundlers (webpack, Vite, esbuild) resolve `TalkingHead.web.tsx` (iframe). The API is identical.
+Metro and Expo use the native entry backed by `react-native-webview`. Standard web bundlers use the browser entry backed by a plain `<iframe>`. The API is identical.
 
 ---
 
@@ -434,8 +435,8 @@ Stay tuned.
 Contributions are welcome. Please open an issue to discuss your idea before submitting a pull request.
 
 ```bash
-git clone https://github.com/sitebay/react-native-talking-head.git
-cd react-native-talking-head
+git clone https://github.com/sitebay/talking-head-studio.git
+cd talking-head-studio
 npm install
 npm run typecheck
 npm test

package/dist/TalkingHead.d.ts

@@ -86,4 +86,3 @@ export interface TalkingHeadRef {
     setAccessories: (accessories: TalkingHeadAccessory[]) => void;
 }
 export declare const TalkingHead: React.ForwardRefExoticComponent<TalkingHeadProps & React.RefAttributes<TalkingHeadRef>>;
-//# sourceMappingURL=TalkingHead.d.ts.map

package/dist/TalkingHead.js

@@ -1,17 +1,25 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { WebView } from 'react-native-webview';
-import { buildAvatarHtml } from './html';
-export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onReady, onError, style, }, ref) => {
-    const webViewRef = useRef(null);
-    const readyRef = useRef(false);
-    const accessoriesRef = useRef(accessories);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TalkingHead = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const html_1 = require("./html");
+exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onReady, onError, style, }, ref) => {
+    const webViewRef = (0, react_1.useRef)(null);
+    const readyRef = (0, react_1.useRef)(false);
+    const pendingMoodRef = (0, react_1.useRef)(mood);
+    const pendingHairColorRef = (0, react_1.useRef)(hairColor);
+    const pendingSkinColorRef = (0, react_1.useRef)(skinColor);
+    const pendingEyeColorRef = (0, react_1.useRef)(eyeColor);
+    const accessoriesRef = (0, react_1.useRef)(accessories);
     // The WebView HTML is built once from stable initial values.
     // avatarUrl + authToken changing causes a controlled key-based remount.
     // All other prop changes (mood, colors, accessories) go via postMessage.
-    const [webViewKey, setWebViewKey] = useState(() => `${avatarUrl}__${authToken ?? ''}`);
-    const prevAvatarRef = useRef({ avatarUrl, authToken });
-    useEffect(() => {
+    const [webViewKey, setWebViewKey] = (0, react_1.useState)(() => `${avatarUrl}__${authToken ?? ''}`);
+    const prevAvatarRef = (0, react_1.useRef)({ avatarUrl, authToken });
+    (0, react_1.useEffect)(() => {
         const prev = prevAvatarRef.current;
         if (prev.avatarUrl !== avatarUrl || prev.authToken !== authToken) {
             prevAvatarRef.current = { avatarUrl, authToken };
@@ -19,50 +27,75 @@ export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral',
             setWebViewKey(`${avatarUrl}__${authToken ?? ''}`);
         }
     }, [avatarUrl, authToken]);
-    const post = useCallback((msg) => {
+    const post = (0, react_1.useCallback)((msg) => {
         webViewRef.current?.postMessage(JSON.stringify(msg));
     }, []);
-    useImperativeHandle(ref, () => ({
+    (0, react_1.useImperativeHandle)(ref, () => ({
         sendAmplitude: (amplitude) => post({ type: 'amplitude', value: amplitude }),
         sendViseme: (viseme, weight = 1.0) => post({ type: 'viseme', viseme, weight }),
         scheduleVisemes: (schedule) => post({ type: 'schedule_visemes', schedule }),
         clearVisemes: () => post({ type: 'clear_visemes' }),
-        setMood: (nextMood) => post({ type: 'mood', value: nextMood }),
-        setHairColor: (color) => post({ type: 'hair_color', value: color }),
-        setSkinColor: (color) => post({ type: 'skin_color', value: color }),
-        setEyeColor: (color) => post({ type: 'eye_color', value: color }),
-        setAccessories: (newAccessories) => post({ type: 'set_accessories', accessories: newAccessories }),
+        setMood: (nextMood) => {
+            pendingMoodRef.current = nextMood;
+            if (readyRef.current)
+                post({ type: 'mood', value: nextMood });
+        },
+        setHairColor: (color) => {
+            pendingHairColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'hair_color', value: color });
+        },
+        setSkinColor: (color) => {
+            pendingSkinColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'skin_color', value: color });
+        },
+        setEyeColor: (color) => {
+            pendingEyeColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'eye_color', value: color });
+        },
+        setAccessories: (newAccessories) => {
+            accessoriesRef.current = newAccessories;
+            if (readyRef.current) {
+                post({ type: 'set_accessories', accessories: newAccessories });
+            }
+        },
     }), [post]);
     // Sync mood via postMessage only — never causes a WebView reload
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingMoodRef.current = mood;
         if (readyRef.current)
             post({ type: 'mood', value: mood });
     }, [mood, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         accessoriesRef.current = accessories;
         if (accessories && readyRef.current) {
             post({ type: 'set_accessories', accessories });
         }
     }, [accessories, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingHairColorRef.current = hairColor;
         if (hairColor && readyRef.current)
             post({ type: 'hair_color', value: hairColor });
     }, [hairColor, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingSkinColorRef.current = skinColor;
         if (skinColor && readyRef.current)
             post({ type: 'skin_color', value: skinColor });
     }, [skinColor, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingEyeColorRef.current = eyeColor;
         if (eyeColor && readyRef.current)
             post({ type: 'eye_color', value: eyeColor });
     }, [eyeColor, post]);
     // Capture stable initial values at first mount only
-    const [initialMood] = useState(mood);
-    const [initialHairColor] = useState(hairColor);
-    const [initialSkinColor] = useState(skinColor);
-    const [initialEyeColor] = useState(eyeColor);
+    const [initialMood] = (0, react_1.useState)(mood);
+    const [initialHairColor] = (0, react_1.useState)(hairColor);
+    const [initialSkinColor] = (0, react_1.useState)(skinColor);
+    const [initialEyeColor] = (0, react_1.useState)(eyeColor);
     // html is stable — only rebuilds when webViewKey changes (avatarUrl/authToken)
-    const html = useMemo(() => buildAvatarHtml({
+    const html = (0, react_1.useMemo)(() => (0, html_1.buildAvatarHtml)({
         avatarUrl,
         authToken,
         mood: initialMood,
@@ -74,12 +107,24 @@ export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral',
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [webViewKey]);
-    const onMessage = useCallback((event) => {
+    const onMessage = (0, react_1.useCallback)((event) => {
         try {
             const msg = JSON.parse(event.nativeEvent.data);
             if (msg.type === 'ready') {
                 readyRef.current = true;
-                // Flush pending props that may have arrived before WebView was ready
+                // Flush pending appearance updates that arrived before the WebView was ready.
+                if (pendingMoodRef.current) {
+                    post({ type: 'mood', value: pendingMoodRef.current });
+                }
+                if (pendingHairColorRef.current) {
+                    post({ type: 'hair_color', value: pendingHairColorRef.current });
+                }
+                if (pendingSkinColorRef.current) {
+                    post({ type: 'skin_color', value: pendingSkinColorRef.current });
+                }
+                if (pendingEyeColorRef.current) {
+                    post({ type: 'eye_color', value: pendingEyeColorRef.current });
+                }
                 if (accessoriesRef.current?.length) {
                     post({ type: 'set_accessories', accessories: accessoriesRef.current });
                 }
@@ -96,12 +141,10 @@ export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral',
             console.warn('[TalkingHead] Invalid message from WebView:', err);
         }
     }, [onReady, onError, post]);
-    return (<View style={[styles.container, style]}>
-        <WebView key={webViewKey} ref={webViewRef} source={{ html }} style={styles.webview} javaScriptEnabled domStorageEnabled allowsInlineMediaPlayback mediaPlaybackRequiresUserAction={false} onMessage={onMessage} originWhitelist={['*']} mixedContentMode="always"/>
-      </View>);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: webViewRef, source: { html }, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, onMessage: onMessage, originWhitelist: ['*'], mixedContentMode: "always" }, webViewKey) }));
 });
-TalkingHead.displayName = 'TalkingHead';
-const styles = StyleSheet.create({
+exports.TalkingHead.displayName = 'TalkingHead';
+const styles = react_native_1.StyleSheet.create({
     container: {
         overflow: 'hidden',
         borderRadius: 12,

package/dist/TalkingHead.web.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
 import type { TalkingHeadVisemeCue, TalkingHeadVisemeSchedule } from './TalkingHead';
 export type { TalkingHeadVisemeCue, TalkingHeadVisemeSchedule };
 export type TalkingHeadMood = 'neutral' | 'happy' | 'sad' | 'angry' | 'excited' | 'thinking' | 'concerned' | 'surprised';
@@ -23,7 +22,7 @@ export interface TalkingHeadProps {
     accessories?: TalkingHeadAccessory[];
     onReady?: () => void;
     onError?: (message: string) => void;
-    style?: StyleProp<ViewStyle>;
+    style?: React.CSSProperties;
 }
 export interface TalkingHeadRef {
     sendAmplitude: (amplitude: number) => void;
@@ -36,4 +35,3 @@ export interface TalkingHeadRef {
     setAccessories: (accessories: TalkingHeadAccessory[]) => void;
 }
 export declare const TalkingHead: React.ForwardRefExoticComponent<TalkingHeadProps & React.RefAttributes<TalkingHeadRef>>;
-//# sourceMappingURL=TalkingHead.web.d.ts.map

package/dist/TalkingHead.web.js

@@ -1,52 +1,128 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { buildAvatarHtml } from './html';
-export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onReady, onError, style, }, ref) => {
-    const iframeRef = useRef(null);
-    const readyRef = useRef(false);
-    const accessoriesRef = useRef(accessories);
-    useEffect(() => {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TalkingHead = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const html_1 = require("./html");
+const containerStyle = {
+    overflow: 'hidden',
+    borderRadius: 12,
+    backgroundColor: 'transparent',
+};
+const iframeStyle = {
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    backgroundColor: 'transparent',
+};
+exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onReady, onError, style, }, ref) => {
+    const iframeRef = (0, react_1.useRef)(null);
+    const readyRef = (0, react_1.useRef)(false);
+    const pendingMoodRef = (0, react_1.useRef)(mood);
+    const pendingHairColorRef = (0, react_1.useRef)(hairColor);
+    const pendingSkinColorRef = (0, react_1.useRef)(skinColor);
+    const pendingEyeColorRef = (0, react_1.useRef)(eyeColor);
+    const accessoriesRef = (0, react_1.useRef)(accessories);
+    (0, react_1.useEffect)(() => {
         accessoriesRef.current = accessories;
     }, [accessories]);
-    const post = useCallback((msg) => {
+    const post = (0, react_1.useCallback)((msg) => {
         iframeRef.current?.contentWindow?.postMessage(JSON.stringify(msg), '*');
     }, []);
-    useImperativeHandle(ref, () => ({
+    (0, react_1.useImperativeHandle)(ref, () => ({
         sendAmplitude: (amplitude) => post({ type: 'amplitude', value: amplitude }),
         scheduleVisemes: (schedule) => post({ type: 'schedule_visemes', schedule }),
         clearVisemes: () => post({ type: 'clear_visemes' }),
-        setMood: (nextMood) => post({ type: 'mood', value: nextMood }),
-        setHairColor: (color) => post({ type: 'hair_color', value: color }),
-        setSkinColor: (color) => post({ type: 'skin_color', value: color }),
-        setEyeColor: (color) => post({ type: 'eye_color', value: color }),
-        setAccessories: (newAccessories) => post({ type: 'set_accessories', accessories: newAccessories }),
+        setMood: (nextMood) => {
+            pendingMoodRef.current = nextMood;
+            if (readyRef.current)
+                post({ type: 'mood', value: nextMood });
+        },
+        setHairColor: (color) => {
+            pendingHairColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'hair_color', value: color });
+        },
+        setSkinColor: (color) => {
+            pendingSkinColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'skin_color', value: color });
+        },
+        setEyeColor: (color) => {
+            pendingEyeColorRef.current = color;
+            if (readyRef.current)
+                post({ type: 'eye_color', value: color });
+        },
+        setAccessories: (newAccessories) => {
+            accessoriesRef.current = newAccessories;
+            if (readyRef.current) {
+                post({ type: 'set_accessories', accessories: newAccessories });
+            }
+        },
     }), [post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingMoodRef.current = mood;
         if (readyRef.current)
             post({ type: 'mood', value: mood });
     }, [mood, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (accessories && readyRef.current) {
             post({ type: 'set_accessories', accessories });
         }
     }, [accessories, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingHairColorRef.current = hairColor;
         if (hairColor && readyRef.current)
             post({ type: 'hair_color', value: hairColor });
     }, [hairColor, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingSkinColorRef.current = skinColor;
         if (skinColor && readyRef.current)
             post({ type: 'skin_color', value: skinColor });
     }, [skinColor, post]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
+        pendingEyeColorRef.current = eyeColor;
         if (eyeColor && readyRef.current)
             post({ type: 'eye_color', value: eyeColor });
     }, [eyeColor, post]);
-    const [initialMood] = React.useState(mood);
-    const [initialHairColor] = React.useState(hairColor);
-    const [initialSkinColor] = React.useState(skinColor);
-    const [initialEyeColor] = React.useState(eyeColor);
-    const html = useMemo(() => buildAvatarHtml({
+    const [initialMood] = react_1.default.useState(mood);
+    const [initialHairColor] = react_1.default.useState(hairColor);
+    const [initialSkinColor] = react_1.default.useState(skinColor);
+    const [initialEyeColor] = react_1.default.useState(eyeColor);
+    const html = (0, react_1.useMemo)(() => (0, html_1.buildAvatarHtml)({
         avatarUrl,
         authToken,
         mood: initialMood,
@@ -65,22 +141,30 @@ export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral',
         initialSkinColor,
         initialEyeColor,
     ]);
-    // The HTML references window.ReactNativeWebView.postMessage — we need to
-    // inject that shim so messages come back to us via window.addEventListener.
-    const srcdoc = useMemo(() => {
+    const srcdoc = (0, react_1.useMemo)(() => {
         const shim = `<script>window.ReactNativeWebView = { postMessage: function(d) { window.parent.postMessage(d, '*'); } };</script>`;
-        // Insert the shim right after <head> so it's available before the module script runs
         return html.replace('<head>', '<head>' + shim);
     }, [html]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const onMessage = (event) => {
-            // Only accept messages from our iframe
             if (iframeRef.current && event.source !== iframeRef.current.contentWindow)
                 return;
             try {
                 const msg = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
                 if (msg.type === 'ready') {
                     readyRef.current = true;
+                    if (pendingMoodRef.current) {
+                        post({ type: 'mood', value: pendingMoodRef.current });
+                    }
+                    if (pendingHairColorRef.current) {
+                        post({ type: 'hair_color', value: pendingHairColorRef.current });
+                    }
+                    if (pendingSkinColorRef.current) {
+                        post({ type: 'skin_color', value: pendingSkinColorRef.current });
+                    }
+                    if (pendingEyeColorRef.current) {
+                        post({ type: 'eye_color', value: pendingEyeColorRef.current });
+                    }
                     if (accessoriesRef.current?.length) {
                         post({ type: 'set_accessories', accessories: accessoriesRef.current });
                     }
@@ -94,26 +178,12 @@ export const TalkingHead = forwardRef(({ avatarUrl, authToken, mood = 'neutral',
                 }
             }
             catch {
-                // ignore non-JSON messages
+                // Ignore non-JSON window messages from other browser integrations.
             }
         };
         window.addEventListener('message', onMessage);
         return () => window.removeEventListener('message', onMessage);
     }, [onReady, onError, post]);
-    return (<View style={[styles.container, style]}>
-        <iframe ref={iframeRef} srcDoc={srcdoc} style={{
-            width: '100%',
-            height: '100%',
-            border: 'none',
-            backgroundColor: 'transparent',
-        }} sandbox="allow-scripts allow-same-origin" title="TalkingHead Avatar"/>
-      </View>);
-});
-TalkingHead.displayName = 'TalkingHead';
-const styles = StyleSheet.create({
-    container: {
-        overflow: 'hidden',
-        borderRadius: 12,
-        backgroundColor: 'transparent',
-    },
+    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle, ...style }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, srcDoc: srcdoc, style: iframeStyle, sandbox: "allow-scripts allow-same-origin", title: "TalkingHead Avatar" }) }));
 });
+exports.TalkingHead.displayName = 'TalkingHead';

package/dist/appearance/apply.d.ts

@@ -4,4 +4,3 @@ type Object3DLike = {
 };
 export declare function applyAppearanceToObject3D(object3d: Object3DLike, appearance: AvatarAppearance): void;
 export {};
-//# sourceMappingURL=apply.d.ts.map

package/dist/appearance/apply.js

@@ -1,5 +1,8 @@
-import { pickTargetForMaterialName } from './matchers';
-import { normalizeAppearance } from './schema';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyAppearanceToObject3D = applyAppearanceToObject3D;
+const matchers_1 = require("./matchers");
+const schema_1 = require("./schema");
 function asMaterialArray(material) {
     if (!material) {
         return [];
@@ -9,11 +12,11 @@ function asMaterialArray(material) {
 function getVertexCount(mesh) {
     return mesh.geometry?.attributes?.position?.count ?? 0;
 }
-export function applyAppearanceToObject3D(object3d, appearance) {
+function applyAppearanceToObject3D(object3d, appearance) {
     if (typeof object3d.traverse !== 'function') {
         return;
     }
-    const normalizedAppearance = normalizeAppearance(appearance);
+    const normalizedAppearance = (0, schema_1.normalizeAppearance)(appearance);
     // First pass: apply name-matched colors and track whether skin was matched,
     // also track the largest mesh for fallback skin coloring.
     let skinMatched = false;
@@ -29,7 +32,7 @@ export function applyAppearanceToObject3D(object3d, appearance) {
             if (!material || typeof material.name !== 'string') {
                 continue;
             }
-            const target = pickTargetForMaterialName(material.name);
+            const target = (0, matchers_1.pickTargetForMaterialName)(material.name);
             if (!target) {
                 // Track the largest unmatched mesh as a skin fallback candidate
                 if (vertexCount > largestVertexCount && material.color && typeof material.color.set === 'function') {

package/dist/appearance/index.d.ts

@@ -2,4 +2,3 @@ export { applyAppearanceToObject3D } from './apply';
 export { pickTargetForMaterialName } from './matchers';
 export { type AvatarAppearance, normalizeAppearance } from './schema';
 export type { AppearanceTarget } from './matchers';
-//# sourceMappingURL=index.d.ts.map

package/dist/appearance/index.js

@@ -1,3 +1,9 @@
-export { applyAppearanceToObject3D } from './apply';
-export { pickTargetForMaterialName } from './matchers';
-export { normalizeAppearance } from './schema';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeAppearance = exports.pickTargetForMaterialName = exports.applyAppearanceToObject3D = void 0;
+var apply_1 = require("./apply");
+Object.defineProperty(exports, "applyAppearanceToObject3D", { enumerable: true, get: function () { return apply_1.applyAppearanceToObject3D; } });
+var matchers_1 = require("./matchers");
+Object.defineProperty(exports, "pickTargetForMaterialName", { enumerable: true, get: function () { return matchers_1.pickTargetForMaterialName; } });
+var schema_1 = require("./schema");
+Object.defineProperty(exports, "normalizeAppearance", { enumerable: true, get: function () { return schema_1.normalizeAppearance; } });

package/dist/appearance/matchers.d.ts

@@ -1,3 +1,2 @@
 export type AppearanceTarget = 'hairColor' | 'skinColor' | 'eyeColor';
 export declare function pickTargetForMaterialName(name: string): AppearanceTarget | null;
-//# sourceMappingURL=matchers.d.ts.map

package/dist/appearance/matchers.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pickTargetForMaterialName = pickTargetForMaterialName;
 function tokenizeMaterialName(name) {
     return name
         .replace(/([a-z\d])([A-Z])/g, '$1 $2')
@@ -15,7 +18,7 @@ function hasToken(tokens, candidates) {
 function hasTokenPrefix(tokens, candidates) {
     return candidates.some((candidate) => tokens.some((token) => token.startsWith(candidate) && token.length > candidate.length));
 }
-export function pickTargetForMaterialName(name) {
+function pickTargetForMaterialName(name) {
     const tokens = tokenizeMaterialName(name);
     if (hasToken(tokens, ['hair', 'fur']) || hasTokenPrefix(tokens, ['hair', 'fur'])) {
         return 'hairColor';

package/dist/appearance/schema.d.ts

@@ -6,4 +6,3 @@ export interface AvatarAppearance {
     eyeColor?: string;
 }
 export declare function normalizeAppearance(input: AvatarAppearance): AvatarAppearance;
-//# sourceMappingURL=schema.d.ts.map

package/dist/appearance/schema.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeAppearance = normalizeAppearance;
 const HEX_COLOR_PATTERN = /^#(?:[\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/;
 function normalizeHexColor(value) {
     if (!HEX_COLOR_PATTERN.test(value)) {
@@ -7,7 +10,7 @@ function normalizeHexColor(value) {
     const expanded = raw.length === 3 ? `${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}` : raw;
     return `#${expanded.toUpperCase()}`;
 }
-export function normalizeAppearance(input) {
+function normalizeAppearance(input) {
     if (input.version !== 1) {
         throw new Error(`Unsupported appearance version: ${input.version}`);
     }

package/dist/editor/AvatarCanvas.d.ts

@@ -11,6 +11,5 @@ interface AvatarCanvasProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare function AvatarCanvas({ avatarUrl, appearance, equipped, placements, editingAssetId, onPlacementChange, onSceneRef, style, className, }: AvatarCanvasProps): import("react").JSX.Element;
+export declare function AvatarCanvas({ avatarUrl, appearance, equipped, placements, editingAssetId, onPlacementChange, onSceneRef, style, className, }: AvatarCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=AvatarCanvas.d.ts.map