npm - talking-head-studio - Versions diffs - 0.2.0 - Mend

talking-head-studio 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/LICENSE +21 -0
package/README.md +459 -0
package/dist/TalkingHead.d.ts +35 -0
package/dist/TalkingHead.d.ts.map +1 -0
package/dist/TalkingHead.js +107 -0
package/dist/TalkingHead.web.d.ts +35 -0
package/dist/TalkingHead.web.d.ts.map +1 -0
package/dist/TalkingHead.web.js +117 -0
package/dist/__tests__/TalkingHead.test.d.ts +2 -0
package/dist/__tests__/TalkingHead.test.d.ts.map +1 -0
package/dist/__tests__/TalkingHead.test.js +23 -0
package/dist/__tests__/sketchfab.test.d.ts +2 -0
package/dist/__tests__/sketchfab.test.d.ts.map +1 -0
package/dist/__tests__/sketchfab.test.js +21 -0
package/dist/appearance/apply.d.ts +7 -0
package/dist/appearance/apply.d.ts.map +1 -0
package/dist/appearance/apply.js +56 -0
package/dist/appearance/index.d.ts +5 -0
package/dist/appearance/index.d.ts.map +1 -0
package/dist/appearance/index.js +3 -0
package/dist/appearance/matchers.d.ts +3 -0
package/dist/appearance/matchers.d.ts.map +1 -0
package/dist/appearance/matchers.js +32 -0
package/dist/appearance/schema.d.ts +9 -0
package/dist/appearance/schema.d.ts.map +1 -0
package/dist/appearance/schema.js +20 -0
package/dist/editor/AvatarCanvas.d.ts +16 -0
package/dist/editor/AvatarCanvas.d.ts.map +1 -0
package/dist/editor/AvatarCanvas.js +85 -0
package/dist/editor/AvatarCanvasErrorBoundary.d.ts +17 -0
package/dist/editor/AvatarCanvasErrorBoundary.d.ts.map +1 -0
package/dist/editor/AvatarCanvasErrorBoundary.js +41 -0
package/dist/editor/AvatarModel.d.ts +12 -0
package/dist/editor/AvatarModel.d.ts.map +1 -0
package/dist/editor/AvatarModel.js +31 -0
package/dist/editor/RigidAccessory.d.ts +15 -0
package/dist/editor/RigidAccessory.d.ts.map +1 -0
package/dist/editor/RigidAccessory.js +76 -0
package/dist/editor/SkinnedClothing.d.ts +7 -0
package/dist/editor/SkinnedClothing.d.ts.map +1 -0
package/dist/editor/SkinnedClothing.js +88 -0
package/dist/editor/index.d.ts +6 -0
package/dist/editor/index.d.ts.map +1 -0
package/dist/editor/index.js +4 -0
package/dist/editor/types.d.ts +28 -0
package/dist/editor/types.d.ts.map +1 -0
package/dist/editor/types.js +1 -0
package/dist/html.d.ts +13 -0
package/dist/html.d.ts.map +1 -0
package/dist/html.js +560 -0
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +2 -0
package/dist/index.web.d.ts +4 -0
package/dist/index.web.d.ts.map +1 -0
package/dist/index.web.js +2 -0
package/dist/sketchfab/api.d.ts +12 -0
package/dist/sketchfab/api.d.ts.map +1 -0
package/dist/sketchfab/api.js +52 -0
package/dist/sketchfab/categories.d.ts +5 -0
package/dist/sketchfab/categories.d.ts.map +1 -0
package/dist/sketchfab/categories.js +124 -0
package/dist/sketchfab/index.d.ts +7 -0
package/dist/sketchfab/index.d.ts.map +1 -0
package/dist/sketchfab/index.js +3 -0
package/dist/sketchfab/types.d.ts +51 -0
package/dist/sketchfab/types.d.ts.map +1 -0
package/dist/sketchfab/types.js +1 -0
package/dist/sketchfab/useSketchfabSearch.d.ts +19 -0
package/dist/sketchfab/useSketchfabSearch.d.ts.map +1 -0
package/dist/sketchfab/useSketchfabSearch.js +78 -0
package/dist/voice/convertToWav.d.ts +6 -0
package/dist/voice/convertToWav.d.ts.map +1 -0
package/dist/voice/convertToWav.js +74 -0
package/dist/voice/index.d.ts +6 -0
package/dist/voice/index.d.ts.map +1 -0
package/dist/voice/index.js +3 -0
package/dist/voice/useAudioPlayer.d.ts +11 -0
package/dist/voice/useAudioPlayer.d.ts.map +1 -0
package/dist/voice/useAudioPlayer.js +61 -0
package/dist/voice/useAudioRecording.d.ts +14 -0
package/dist/voice/useAudioRecording.d.ts.map +1 -0
package/dist/voice/useAudioRecording.js +162 -0
package/package.json +120 -0
package/src/TalkingHead.tsx +207 -0
package/src/TalkingHead.web.tsx +210 -0
package/src/__tests__/TalkingHead.test.tsx +32 -0
package/src/__tests__/sketchfab.test.ts +24 -0
package/src/appearance/apply.ts +94 -0
package/src/appearance/index.ts +4 -0
package/src/appearance/matchers.ts +43 -0
package/src/appearance/schema.ts +35 -0
package/src/editor/AvatarCanvas.tsx +167 -0
package/src/editor/AvatarCanvasErrorBoundary.tsx +64 -0
package/src/editor/AvatarModel.tsx +49 -0
package/src/editor/RigidAccessory.tsx +130 -0
package/src/editor/SkinnedClothing.tsx +114 -0
package/src/editor/index.ts +5 -0
package/src/editor/r3f-shim.d.ts +34 -0
package/src/editor/types.ts +30 -0
package/src/html.ts +572 -0
package/src/index.ts +8 -0
package/src/index.web.ts +8 -0
package/src/sketchfab/api.ts +82 -0
package/src/sketchfab/categories.ts +127 -0
package/src/sketchfab/index.ts +6 -0
package/src/sketchfab/types.ts +40 -0
package/src/sketchfab/useSketchfabSearch.ts +110 -0
package/src/voice/convertToWav.ts +87 -0
package/src/voice/index.ts +7 -0
package/src/voice/useAudioPlayer.ts +78 -0
package/src/voice/useAudioRecording.ts +207 -0

package/dist/TalkingHead.web.js ADDED Viewed

@@ -0,0 +1,117 @@
+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(() => {
+        accessoriesRef.current = accessories;
+    }, [accessories]);
+    const post = useCallback((msg) => {
+        iframeRef.current?.contentWindow?.postMessage(JSON.stringify(msg), '*');
+    }, []);
+    useImperativeHandle(ref, () => ({
+        sendAmplitude: (amplitude) => post({ type: 'amplitude', value: amplitude }),
+        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 }),
+    }), [post]);
+    useEffect(() => {
+        if (readyRef.current)
+            post({ type: 'mood', value: mood });
+    }, [mood, post]);
+    useEffect(() => {
+        if (accessories && readyRef.current) {
+            post({ type: 'set_accessories', accessories });
+        }
+    }, [accessories, post]);
+    useEffect(() => {
+        if (hairColor && readyRef.current)
+            post({ type: 'hair_color', value: hairColor });
+    }, [hairColor, post]);
+    useEffect(() => {
+        if (skinColor && readyRef.current)
+            post({ type: 'skin_color', value: skinColor });
+    }, [skinColor, post]);
+    useEffect(() => {
+        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({
+        avatarUrl,
+        authToken,
+        mood: initialMood,
+        cameraView,
+        cameraDistance,
+        initialHairColor,
+        initialSkinColor,
+        initialEyeColor,
+    }), [
+        avatarUrl,
+        authToken,
+        cameraView,
+        cameraDistance,
+        initialMood,
+        initialHairColor,
+        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 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(() => {
+        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 (accessoriesRef.current?.length) {
+                        post({ type: 'set_accessories', accessories: accessoriesRef.current });
+                    }
+                    onReady?.();
+                }
+                else if (msg.type === 'error') {
+                    onError?.(msg.message);
+                }
+                else if (msg.type === 'log') {
+                    console.log('[TalkingHead]', msg.message);
+                }
+            }
+            catch {
+                // ignore non-JSON messages
+            }
+        };
+        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',
+    },
+});

package/dist/__tests__/TalkingHead.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=TalkingHead.test.d.ts.map

package/dist/__tests__/TalkingHead.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TalkingHead.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/TalkingHead.test.tsx"],"names":[],"mappings":""}

package/dist/__tests__/TalkingHead.test.js ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { TalkingHead } from '../TalkingHead';
+// Mock react-native-webview
+jest.mock('react-native-webview', () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { View } = require('react-native');
+    const MockWebView = React.forwardRef((props, ref) => {
+        React.useImperativeHandle(ref, () => ({
+            postMessage: jest.fn(),
+        }));
+        return <View {...props}/>;
+    });
+    MockWebView.displayName = 'MockWebView';
+    return { WebView: MockWebView };
+});
+describe('TalkingHead', () => {
+    it('renders without crashing', () => {
+        render(<TalkingHead avatarUrl="https://example.com/avatar.glb" style={{ flex: 1 }}/>);
+    });
+});

package/dist/__tests__/sketchfab.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=sketchfab.test.d.ts.map

package/dist/__tests__/sketchfab.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"sketchfab.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/sketchfab.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/sketchfab.test.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { ACCESSORY_CATEGORIES } from '../sketchfab';
+describe('ACCESSORY_CATEGORIES', () => {
+    it('includes the full accessory category set used by the app browsers', () => {
+        expect(ACCESSORY_CATEGORIES.map((category) => category.id)).toEqual(expect.arrayContaining([
+            'hair',
+            'hat',
+            'glasses',
+            'necklace',
+            'handheld',
+            'glove',
+            'wings',
+            'tail',
+            'cape',
+            'belt',
+            'shoulder_pad',
+            'top',
+            'bottom',
+            'footwear',
+        ]));
+    });
+});

package/dist/appearance/apply.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { type AvatarAppearance } from './schema';
+type Object3DLike = {
+    traverse?: (visitor: (object: unknown) => void) => void;
+};
+export declare function applyAppearanceToObject3D(object3d: Object3DLike, appearance: AvatarAppearance): void;
+export {};
+//# sourceMappingURL=apply.d.ts.map

package/dist/appearance/apply.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../src/appearance/apply.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAAuB,MAAM,UAAU,CAAC;AAmBtE,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC;CACzD,CAAC;AAcF,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,gBAAgB,GAC3B,IAAI,CAsDN"}

package/dist/appearance/apply.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { pickTargetForMaterialName } from './matchers';
+import { normalizeAppearance } from './schema';
+function asMaterialArray(material) {
+    if (!material) {
+        return [];
+    }
+    return Array.isArray(material) ? material : [material];
+}
+function getVertexCount(mesh) {
+    return mesh.geometry?.attributes?.position?.count ?? 0;
+}
+export function applyAppearanceToObject3D(object3d, appearance) {
+    if (typeof object3d.traverse !== 'function') {
+        return;
+    }
+    const normalizedAppearance = 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;
+    let largestVertexCount = 0;
+    let largestMeshMaterial = null;
+    object3d.traverse((object) => {
+        const mesh = object;
+        if (!mesh?.isMesh) {
+            return;
+        }
+        const vertexCount = getVertexCount(mesh);
+        for (const material of asMaterialArray(mesh.material)) {
+            if (!material || typeof material.name !== 'string') {
+                continue;
+            }
+            const target = 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') {
+                    largestVertexCount = vertexCount;
+                    largestMeshMaterial = material;
+                }
+                continue;
+            }
+            if (target === 'skinColor') {
+                skinMatched = true;
+            }
+            const color = normalizedAppearance[target];
+            if (!color || !material.color || typeof material.color.set !== 'function') {
+                continue;
+            }
+            material.color.set(color);
+        }
+    });
+    // Second pass: if no skin material was found by name, apply skin color to
+    // the largest mesh — skin is the largest organ after all.
+    if (!skinMatched && largestMeshMaterial && normalizedAppearance.skinColor) {
+        largestMeshMaterial.color.set(normalizedAppearance.skinColor);
+    }
+}

package/dist/appearance/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+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.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/appearance/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,KAAK,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACtE,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/appearance/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { applyAppearanceToObject3D } from './apply';
+export { pickTargetForMaterialName } from './matchers';
+export { normalizeAppearance } from './schema';

package/dist/appearance/matchers.d.ts ADDED Viewed

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

package/dist/appearance/matchers.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/appearance/matchers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;AAwBtE,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAkB/E"}

package/dist/appearance/matchers.js ADDED Viewed

@@ -0,0 +1,32 @@
+function tokenizeMaterialName(name) {
+    return name
+        .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+        .toLowerCase()
+        .split(/[^a-z\d]+/)
+        .filter(Boolean);
+}
+// Exact token match: any token equals the candidate exactly
+function hasToken(tokens, candidates) {
+    return candidates.some((candidate) => tokens.includes(candidate));
+}
+// Prefix match: candidate appears at the START of a token.
+// e.g. "eye" matches token "eyeball", "eyelid", "eyebrow" but NOT "chair" (c-hair).
+// We intentionally avoid suffix/contains to prevent false positives like chair→hair.
+function hasTokenPrefix(tokens, candidates) {
+    return candidates.some((candidate) => tokens.some((token) => token.startsWith(candidate) && token.length > candidate.length));
+}
+export function pickTargetForMaterialName(name) {
+    const tokens = tokenizeMaterialName(name);
+    if (hasToken(tokens, ['hair', 'fur']) || hasTokenPrefix(tokens, ['hair', 'fur'])) {
+        return 'hairColor';
+    }
+    if (hasToken(tokens, ['skin', 'body', 'face']) || hasTokenPrefix(tokens, ['skin', 'body', 'face'])) {
+        return 'skinColor';
+    }
+    // "eye" prefix catches: eyeball, eyelid, eyebrow, eyelash
+    // "eye" suffix catches: lefteye, righteye
+    if (hasToken(tokens, ['eye', 'iris']) || hasTokenPrefix(tokens, ['eye', 'iris'])) {
+        return 'eyeColor';
+    }
+    return null;
+}

package/dist/appearance/schema.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export type AppearanceVersion = 1;
+export interface AvatarAppearance {
+    version: AppearanceVersion;
+    hairColor?: string;
+    skinColor?: string;
+    eyeColor?: string;
+}
+export declare function normalizeAppearance(input: AvatarAppearance): AvatarAppearance;
+//# sourceMappingURL=schema.d.ts.map

package/dist/appearance/schema.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/appearance/schema.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAW7E"}

package/dist/appearance/schema.js ADDED Viewed

@@ -0,0 +1,20 @@
+const HEX_COLOR_PATTERN = /^#(?:[\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/;
+function normalizeHexColor(value) {
+    if (!HEX_COLOR_PATTERN.test(value)) {
+        throw new Error(`Invalid color format: ${value}`);
+    }
+    const raw = value.slice(1);
+    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) {
+    if (input.version !== 1) {
+        throw new Error(`Unsupported appearance version: ${input.version}`);
+    }
+    return {
+        version: input.version,
+        hairColor: input.hairColor != null ? normalizeHexColor(input.hairColor) : undefined,
+        skinColor: input.skinColor != null ? normalizeHexColor(input.skinColor) : undefined,
+        eyeColor: input.eyeColor != null ? normalizeHexColor(input.eyeColor) : undefined,
+    };
+}

package/dist/editor/AvatarCanvas.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { AvatarAppearance } from '../appearance';
+import type { AssetPlacement, EquippedAsset } from './types';
+interface AvatarCanvasProps {
+    avatarUrl: string;
+    appearance?: AvatarAppearance;
+    equipped?: EquippedAsset[];
+    placements?: Record<string, AssetPlacement>;
+    editingAssetId?: string | null;
+    onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
+    onSceneRef?: (scene: any) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function AvatarCanvas({ avatarUrl, appearance, equipped, placements, editingAssetId, onPlacementChange, onSceneRef, style, className, }: AvatarCanvasProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AvatarCanvas.d.ts.map

package/dist/editor/AvatarCanvas.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AvatarCanvas.d.ts","sourceRoot":"","sources":["../../src/editor/AvatarCanvas.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKtD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAW7D,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAEzE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,QAAa,EACb,UAAe,EACf,cAAqB,EACrB,iBAAiB,EACjB,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,iBAAiB,+BA0HnB"}

package/dist/editor/AvatarCanvas.js ADDED Viewed

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import { Environment, OrbitControls } from '@react-three/drei';
+import { Canvas, useThree } from '@react-three/fiber';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { AvatarCanvasErrorBoundary } from './AvatarCanvasErrorBoundary';
+import { AvatarModel } from './AvatarModel';
+import { RigidAccessory } from './RigidAccessory';
+import { SkinnedClothing } from './SkinnedClothing';
+/** Captures the R3F scene object (which contains everything) and passes it up. */
+function SceneRefCapture({ onSceneRef }) {
+    const { scene } = useThree();
+    useEffect(() => {
+        onSceneRef(scene);
+    }, [scene, onSceneRef]);
+    return null;
+}
+export function AvatarCanvas({ avatarUrl, appearance, equipped = [], placements = {}, editingAssetId = null, onPlacementChange, onSceneRef, style, className, }) {
+    const [skeleton, setSkeleton] = useState(null);
+    const [avatarScene, setAvatarScene] = useState(null);
+    const [cameraTarget, setCameraTarget] = useState([0, 1, 0]);
+    const [cameraPosition, setCameraPosition] = useState([0, 1.2, 2.5]);
+    const canvasRef = useRef(null);
+    const handleSkeletonReady = useCallback((skel) => {
+        setSkeleton(skel);
+        if (skel.bones.length > 0) {
+            const root = skel.bones[0].parent ?? skel.bones[0];
+            setAvatarScene(root);
+        }
+    }, []);
+    const handleBoundsReady = useCallback((center, height) => {
+        const dist = Math.max(height * 1.4, 1.5);
+        setCameraTarget([center.x, center.y, center.z]);
+        setCameraPosition([center.x, center.y + height * 0.1, center.z + dist]);
+    }, []);
+    const equippedItems = equipped.filter(Boolean);
+    const wrapperClass = [
+        'w-full h-full overflow-hidden relative bg-[radial-gradient(ellipse_at_center,_rgba(30,20,60,0.6)_0%,_rgba(5,5,15,0.95)_100%)] [background-size:100%_100%]',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (<div className={wrapperClass} style={style}>
+      {/* Subtle grid floor */}
+      <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.3) 1px,transparent 1px)', backgroundSize: '60px 60px' }}/>
+      {avatarUrl ? (<AvatarCanvasErrorBoundary>
+          <Canvas ref={canvasRef} camera={{ position: cameraPosition, fov: 45 }} style={{ width: '100%', height: '100%' }}>
+            <Suspense fallback={null}>
+              {onSceneRef && <SceneRefCapture onSceneRef={onSceneRef}/>}
+              <ambientLight intensity={0.6}/>
+              <directionalLight position={[5, 5, 5]} intensity={0.8}/>
+              <Environment preset="studio"/>
+              <OrbitControls target={cameraTarget} minDistance={1} maxDistance={10} enablePan={false} makeDefault/>
+              <AvatarModel url={avatarUrl} appearance={appearance} scale={1} onSkeletonReady={handleSkeletonReady} onBoundsReady={handleBoundsReady}/>
+              {equippedItems.map((asset) => {
+                if (!asset)
+                    return null;
+                const llmPlacement = placements[asset.id];
+                const isEditing = editingAssetId === asset.id;
+                // If a placement is provided, always render as rigid attachment
+                if (llmPlacement) {
+                    const bone = llmPlacement.bone ?? asset.attach_bone;
+                    if (!bone)
+                        return null;
+                    return (<RigidAccessory key={asset.id} assetId={asset.id} url={asset.url} avatarScene={avatarScene} attachBone={bone} offsetPosition={llmPlacement.position} offsetRotation={llmPlacement.rotation} scale={llmPlacement.scale} isEditing={isEditing} onPlacementChange={onPlacementChange}/>);
+                }
+                if (asset.type === 'skinned') {
+                    return (<SkinnedClothing key={asset.id} url={asset.url} avatarSkeleton={skeleton}/>);
+                }
+                if (asset.type === 'rigid') {
+                    const bone = asset.attach_bone;
+                    if (!bone)
+                        return null;
+                    return (<RigidAccessory key={asset.id} assetId={asset.id} url={asset.url} avatarScene={avatarScene} attachBone={bone} offsetPosition={asset.offset_position} offsetRotation={asset.offset_rotation} isEditing={isEditing} onPlacementChange={onPlacementChange}/>);
+                }
+                return null;
+            })}
+            </Suspense>
+          </Canvas>
+        </AvatarCanvasErrorBoundary>) : (<div className="flex items-center justify-center h-full text-muted-foreground">
+          <p>Select a base avatar to get started</p>
+        </div>)}
+    </div>);
+}

package/dist/editor/AvatarCanvasErrorBoundary.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface AvatarCanvasErrorBoundaryProps {
+    children: ReactNode;
+}
+interface AvatarCanvasErrorBoundaryState {
+    hasError: boolean;
+    retryKey: number;
+}
+export declare class AvatarCanvasErrorBoundary extends Component<AvatarCanvasErrorBoundaryProps, AvatarCanvasErrorBoundaryState> {
+    state: AvatarCanvasErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    static getDerivedStateFromError(): AvatarCanvasErrorBoundaryState;
+    private handleRetry;
+    render(): import("react").JSX.Element;
+}
+export {};
+//# sourceMappingURL=AvatarCanvasErrorBoundary.d.ts.map

package/dist/editor/AvatarCanvasErrorBoundary.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AvatarCanvasErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/editor/AvatarCanvasErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,UAAU,8BAA8B;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,yBAA0B,SAAQ,SAAS,CACtD,8BAA8B,EAC9B,8BAA8B,CAC/B;IACC,KAAK,EAAE,8BAA8B,CAGnC;IAEF,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAI3D,MAAM,CAAC,wBAAwB,IAAI,8BAA8B;IAOjE,OAAO,CAAC,WAAW,CAKjB;IAEF,MAAM;CAyBP"}

package/dist/editor/AvatarCanvasErrorBoundary.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+export class AvatarCanvasErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+            retryKey: 0,
+        };
+        this.handleRetry = () => {
+            this.setState((prev) => ({
+                hasError: false,
+                retryKey: prev.retryKey + 1,
+            }));
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('[AvatarCanvas] WebGL error', error, errorInfo.componentStack);
+    }
+    static getDerivedStateFromError() {
+        return {
+            hasError: true,
+            retryKey: 0,
+        };
+    }
+    render() {
+        if (this.state.hasError) {
+            return (<div className="flex h-full w-full flex-col items-center justify-center gap-3 p-4 text-center">
+          <p className="text-sm font-medium text-foreground">3D rendering unavailable</p>
+          <p className="text-xs text-muted-foreground">
+            Your device or browser cannot initialize WebGL.
+          </p>
+          <button className="rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-muted" onClick={this.handleRetry} type="button">
+            Retry
+          </button>
+        </div>);
+        }
+        return (<div className="h-full w-full" key={this.state.retryKey}>
+        {this.props.children}
+      </div>);
+    }
+}

package/dist/editor/AvatarModel.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Vector3 } from 'three';
+import type { AvatarAppearance } from '../appearance';
+interface AvatarModelProps {
+    url: string;
+    appearance?: AvatarAppearance;
+    scale?: number;
+    onSkeletonReady?: (skeleton: any) => void;
+    onBoundsReady?: (center: typeof Vector3.prototype, height: number) => void;
+}
+export declare function AvatarModel({ url, appearance, scale, onSkeletonReady, onBoundsReady, }: AvatarModelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AvatarModel.d.ts.map

package/dist/editor/AvatarModel.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AvatarModel.d.ts","sourceRoot":"","sources":["../../src/editor/AvatarModel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,OAAO,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,UAAU,EACV,KAAS,EACT,eAAe,EACf,aAAa,GACd,EAAE,gBAAgB,+BA0BlB"}

package/dist/editor/AvatarModel.js ADDED Viewed

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import { useGLTF } from '@react-three/drei';
+import { useEffect, useRef } from 'react';
+import { Box3, Vector3 } from 'three';
+import { applyAppearanceToObject3D } from '../appearance';
+export function AvatarModel({ url, appearance, scale = 1, onSkeletonReady, onBoundsReady, }) {
+    const { scene } = useGLTF(url);
+    const groupRef = useRef(null);
+    useEffect(() => {
+        if (!scene)
+            return;
+        scene.traverse((child) => {
+            if (child.isSkinnedMesh && child.skeleton) {
+                onSkeletonReady?.(child.skeleton);
+            }
+        });
+        if (onBoundsReady) {
+            const box = new Box3().setFromObject(scene);
+            const center = new Vector3();
+            box.getCenter(center);
+            const height = box.max.y - box.min.y;
+            onBoundsReady(center, height);
+        }
+    }, [scene, onSkeletonReady, onBoundsReady]);
+    useEffect(() => {
+        if (!scene)
+            return;
+        applyAppearanceToObject3D(scene, appearance ?? { version: 1 });
+    }, [scene, appearance]);
+    return <primitive ref={groupRef} object={scene} scale={scale}/>;
+}

package/dist/editor/RigidAccessory.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { AssetPlacement } from './types';
+interface RigidAccessoryProps {
+    assetId: string;
+    url: string;
+    avatarScene: any;
+    attachBone: string;
+    offsetPosition?: [number, number, number];
+    offsetRotation?: [number, number, number];
+    scale?: number;
+    isEditing?: boolean;
+    onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
+}
+export declare function RigidAccessory({ assetId, url, avatarScene, attachBone, offsetPosition, offsetRotation, scale, isEditing, onPlacementChange, }: RigidAccessoryProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=RigidAccessory.d.ts.map

package/dist/editor/RigidAccessory.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RigidAccessory.d.ts","sourceRoot":"","sources":["../../src/editor/RigidAccessory.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IAEZ,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1E;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,GAAG,EACH,WAAW,EACX,UAAU,EACV,cAAc,EACd,cAAc,EACd,KAAS,EACT,SAAiB,EACjB,iBAAiB,GAClB,EAAE,mBAAmB,sCAoGrB"}