talking-head-studio 0.4.10 → 0.4.12

package/dist/editor/boneLockedDrag.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+/**
+ * Converts a screen-space drag delta into a world-space translation delta,
+ * keeping the accessory in a plane facing the camera (bone-locked plane).
+ */
+export declare function screenDeltaToWorldDelta(camera: THREE.PerspectiveCamera, objectWorldPos: THREE.Vector3, dx: number, dy: number, viewportWidth: number, viewportHeight: number): THREE.Vector3;
+/**
+ * Computes the rotation angle delta between two pointer-pair angles.
+ * Returns delta in radians, normalized to [-π, π].
+ */
+export declare function twoPointerAngleDelta(startAngle: number, currentAngle: number): number;

package/dist/editor/boneLockedDrag.js

@@ -0,0 +1,68 @@
+"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.screenDeltaToWorldDelta = screenDeltaToWorldDelta;
+exports.twoPointerAngleDelta = twoPointerAngleDelta;
+const THREE = __importStar(require("three"));
+/**
+ * Converts a screen-space drag delta into a world-space translation delta,
+ * keeping the accessory in a plane facing the camera (bone-locked plane).
+ */
+function screenDeltaToWorldDelta(camera, objectWorldPos, dx, dy, viewportWidth, viewportHeight) {
+    const distance = objectWorldPos.distanceTo(camera.position);
+    const fovY = (camera.fov * Math.PI) / 180;
+    const worldHeight = 2 * distance * Math.tan(fovY / 2);
+    const worldWidth = worldHeight * (viewportWidth / viewportHeight);
+    const right = new THREE.Vector3();
+    const up = new THREE.Vector3();
+    camera.getWorldDirection(new THREE.Vector3()); // ensure matrix is fresh
+    right.setFromMatrixColumn(camera.matrixWorld, 0).normalize();
+    up.setFromMatrixColumn(camera.matrixWorld, 1).normalize();
+    return right
+        .multiplyScalar((dx / viewportWidth) * worldWidth)
+        .add(up.multiplyScalar((-dy / viewportHeight) * worldHeight));
+}
+/**
+ * Computes the rotation angle delta between two pointer-pair angles.
+ * Returns delta in radians, normalized to [-π, π].
+ */
+function twoPointerAngleDelta(startAngle, currentAngle) {
+    let delta = currentAngle - startAngle;
+    while (delta > Math.PI)
+        delta -= 2 * Math.PI;
+    while (delta < -Math.PI)
+        delta += 2 * Math.PI;
+    return delta;
+}

package/dist/editor/boneSnap.js

@@ -15,15 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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.useBoneSnap = exports.snapPlacementToNearestBone = exports.getWorldPositionForPlacement = exports.getWorldPositionForBone = exports.findNearestBone = exports.HUMANOID_BONES = void 0;
+exports.getWorldPositionForPlacement = exports.HUMANOID_BONES = void 0;
+exports.findNearestBone = findNearestBone;
+exports.getWorldPositionForBone = getWorldPositionForBone;
+exports.snapPlacementToNearestBone = snapPlacementToNearestBone;
+exports.useBoneSnap = useBoneSnap;
 const react_1 = require("react");
 const Haptics = __importStar(require("expo-haptics"));
 const THREE = __importStar(require("three"));
@@ -54,7 +68,6 @@ function findNearestBone(avatarScene, worldPos, maxDistance = 0.35) {
     });
     return best;
 }
-exports.findNearestBone = findNearestBone;
 /**
  * Returns the world-space position of a named bone in the avatar scene.
  * Returns the scene origin if the bone is not found.
@@ -68,13 +81,11 @@ function getWorldPositionForBone(avatarScene, boneName) {
     });
     return result;
 }
-exports.getWorldPositionForBone = getWorldPositionForBone;
 // Legacy alias kept for call-site compatibility
 exports.getWorldPositionForPlacement = getWorldPositionForBone;
 function snapPlacementToNearestBone(avatarScene, worldPos) {
     return findNearestBone(avatarScene, worldPos);
 }
-exports.snapPlacementToNearestBone = snapPlacementToNearestBone;
 /**
  * Hook that returns a snap function. Fires haptic feedback when a new bone
  * is snapped to.
@@ -90,4 +101,3 @@ function useBoneSnap(avatarScene) {
         return result;
     }, [avatarScene]);
 }
-exports.useBoneSnap = useBoneSnap;

package/dist/editor/boneSnap.web.d.ts

@@ -0,0 +1,27 @@
+import * as THREE from 'three';
+export declare const HUMANOID_BONES: readonly ["Hips", "Spine", "Spine1", "Spine2", "Neck", "Head", "LeftShoulder", "LeftArm", "LeftForeArm", "LeftHand", "RightShoulder", "RightArm", "RightForeArm", "RightHand", "LeftUpLeg", "LeftLeg", "LeftFoot", "LeftToeBase", "RightUpLeg", "RightLeg", "RightFoot", "RightToeBase"];
+export type HumanoidBone = (typeof HUMANOID_BONES)[number];
+export interface BoneSnapResult {
+    bone: string;
+    position: THREE.Vector3;
+    distance: number;
+}
+/**
+ * Given an avatar scene and a world-space position, finds the nearest skeleton
+ * bone whose name matches a known humanoid bone name.
+ */
+export declare function findNearestBone(avatarScene: THREE.Object3D, worldPos: THREE.Vector3, maxDistance?: number): BoneSnapResult | null;
+/**
+ * Returns the world-space position of a named bone in the avatar scene.
+ * Returns the scene origin if the bone is not found.
+ */
+export declare function getWorldPositionForBone(avatarScene: THREE.Object3D, boneName: string): THREE.Vector3;
+export declare const getWorldPositionForPlacement: typeof getWorldPositionForBone;
+/**
+ * Returns the nearest known humanoid bone to a placement point.
+ */
+export declare function snapPlacementToNearestBone(avatarScene: THREE.Object3D, worldPos: THREE.Vector3): BoneSnapResult | null;
+/**
+ * Web-safe snap hook. Native builds use the haptic version from boneSnap.ts.
+ */
+export declare function useBoneSnap(avatarScene: THREE.Object3D | null): (worldPos: THREE.Vector3) => BoneSnapResult | null;

package/dist/editor/boneSnap.web.js

@@ -0,0 +1,99 @@
+"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.getWorldPositionForPlacement = exports.HUMANOID_BONES = void 0;
+exports.findNearestBone = findNearestBone;
+exports.getWorldPositionForBone = getWorldPositionForBone;
+exports.snapPlacementToNearestBone = snapPlacementToNearestBone;
+exports.useBoneSnap = useBoneSnap;
+const react_1 = require("react");
+const THREE = __importStar(require("three"));
+exports.HUMANOID_BONES = [
+    'Hips', 'Spine', 'Spine1', 'Spine2', 'Neck', 'Head',
+    'LeftShoulder', 'LeftArm', 'LeftForeArm', 'LeftHand',
+    'RightShoulder', 'RightArm', 'RightForeArm', 'RightHand',
+    'LeftUpLeg', 'LeftLeg', 'LeftFoot', 'LeftToeBase',
+    'RightUpLeg', 'RightLeg', 'RightFoot', 'RightToeBase',
+];
+/**
+ * Given an avatar scene and a world-space position, finds the nearest skeleton
+ * bone whose name matches a known humanoid bone name.
+ */
+function findNearestBone(avatarScene, worldPos, maxDistance = 0.35) {
+    let best = null;
+    const boneWorldPos = new THREE.Vector3();
+    avatarScene.traverse((obj) => {
+        if (!(obj instanceof THREE.Bone))
+            return;
+        if (!exports.HUMANOID_BONES.includes(obj.name))
+            return;
+        obj.getWorldPosition(boneWorldPos);
+        const dist = worldPos.distanceTo(boneWorldPos);
+        if (dist < maxDistance && (!best || dist < best.distance)) {
+            best = { bone: obj.name, position: boneWorldPos.clone(), distance: dist };
+        }
+    });
+    return best;
+}
+/**
+ * Returns the world-space position of a named bone in the avatar scene.
+ * Returns the scene origin if the bone is not found.
+ */
+function getWorldPositionForBone(avatarScene, boneName) {
+    const result = new THREE.Vector3();
+    avatarScene.traverse((obj) => {
+        if (obj instanceof THREE.Bone && obj.name === boneName) {
+            obj.getWorldPosition(result);
+        }
+    });
+    return result;
+}
+exports.getWorldPositionForPlacement = getWorldPositionForBone;
+/**
+ * Returns the nearest known humanoid bone to a placement point.
+ */
+function snapPlacementToNearestBone(avatarScene, worldPos) {
+    return findNearestBone(avatarScene, worldPos);
+}
+/**
+ * Web-safe snap hook. Native builds use the haptic version from boneSnap.ts.
+ */
+function useBoneSnap(avatarScene) {
+    return (0, react_1.useCallback)((worldPos) => {
+        if (!avatarScene)
+            return null;
+        return findNearestBone(avatarScene, worldPos);
+    }, [avatarScene]);
+}

package/dist/editor/index.web.d.ts

@@ -0,0 +1,10 @@
+export { AvatarCanvas } from './AvatarCanvas';
+export { AvatarEditor } from './AvatarEditor';
+export { AvatarModel } from './AvatarModel';
+export { RigidAccessory } from './RigidAccessory';
+export { SkinnedClothing } from './SkinnedClothing';
+export { FaceSqueezeEditor, FACE_SQUEEZE_LOCAL_MODULE } from './FaceSqueezeEditor.web';
+export { studioTheme, withAlpha } from './studioTheme';
+export { useBoneSnap, findNearestBone, getWorldPositionForBone, getWorldPositionForPlacement, snapPlacementToNearestBone, HUMANOID_BONES, } from './boneSnap.web';
+export type { AvatarEditorProps, AssetPlacement, EquippedAsset, FaceSqueezeEditorProps } from './types';
+export type { BoneSnapResult, HumanoidBone } from './boneSnap.web';

package/dist/editor/index.web.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HUMANOID_BONES = exports.snapPlacementToNearestBone = exports.getWorldPositionForPlacement = exports.getWorldPositionForBone = exports.findNearestBone = exports.useBoneSnap = exports.withAlpha = exports.studioTheme = exports.FACE_SQUEEZE_LOCAL_MODULE = exports.FaceSqueezeEditor = exports.SkinnedClothing = exports.RigidAccessory = exports.AvatarModel = exports.AvatarEditor = exports.AvatarCanvas = void 0;
+var AvatarCanvas_1 = require("./AvatarCanvas");
+Object.defineProperty(exports, "AvatarCanvas", { enumerable: true, get: function () { return AvatarCanvas_1.AvatarCanvas; } });
+var AvatarEditor_1 = require("./AvatarEditor");
+Object.defineProperty(exports, "AvatarEditor", { enumerable: true, get: function () { return AvatarEditor_1.AvatarEditor; } });
+var AvatarModel_1 = require("./AvatarModel");
+Object.defineProperty(exports, "AvatarModel", { enumerable: true, get: function () { return AvatarModel_1.AvatarModel; } });
+var RigidAccessory_1 = require("./RigidAccessory");
+Object.defineProperty(exports, "RigidAccessory", { enumerable: true, get: function () { return RigidAccessory_1.RigidAccessory; } });
+var SkinnedClothing_1 = require("./SkinnedClothing");
+Object.defineProperty(exports, "SkinnedClothing", { enumerable: true, get: function () { return SkinnedClothing_1.SkinnedClothing; } });
+var FaceSqueezeEditor_web_1 = require("./FaceSqueezeEditor.web");
+Object.defineProperty(exports, "FaceSqueezeEditor", { enumerable: true, get: function () { return FaceSqueezeEditor_web_1.FaceSqueezeEditor; } });
+Object.defineProperty(exports, "FACE_SQUEEZE_LOCAL_MODULE", { enumerable: true, get: function () { return FaceSqueezeEditor_web_1.FACE_SQUEEZE_LOCAL_MODULE; } });
+var studioTheme_1 = require("./studioTheme");
+Object.defineProperty(exports, "studioTheme", { enumerable: true, get: function () { return studioTheme_1.studioTheme; } });
+Object.defineProperty(exports, "withAlpha", { enumerable: true, get: function () { return studioTheme_1.withAlpha; } });
+var boneSnap_web_1 = require("./boneSnap.web");
+Object.defineProperty(exports, "useBoneSnap", { enumerable: true, get: function () { return boneSnap_web_1.useBoneSnap; } });
+Object.defineProperty(exports, "findNearestBone", { enumerable: true, get: function () { return boneSnap_web_1.findNearestBone; } });
+Object.defineProperty(exports, "getWorldPositionForBone", { enumerable: true, get: function () { return boneSnap_web_1.getWorldPositionForBone; } });
+Object.defineProperty(exports, "getWorldPositionForPlacement", { enumerable: true, get: function () { return boneSnap_web_1.getWorldPositionForPlacement; } });
+Object.defineProperty(exports, "snapPlacementToNearestBone", { enumerable: true, get: function () { return boneSnap_web_1.snapPlacementToNearestBone; } });
+Object.defineProperty(exports, "HUMANOID_BONES", { enumerable: true, get: function () { return boneSnap_web_1.HUMANOID_BONES; } });

package/dist/editor/studioTheme.d.ts

@@ -1,20 +1,20 @@
 export declare const studioTheme: {
     readonly colors: {
-        readonly background: "#111315";
-        readonly backgroundAlt: "#191d20";
-        readonly surface: "#1c2125";
-        readonly surfaceRaised: "#252b30";
-        readonly surfaceSoft: "#2b3238";
-        readonly border: "#394249";
-        readonly borderStrong: "#53606a";
-        readonly textPrimary: "#f6efe4";
-        readonly textSecondary: "#cabfaa";
-        readonly textMuted: "#8b847a";
-        readonly accent: "#ff7a59";
-        readonly accentStrong: "#ff9c72";
-        readonly accentMuted: "rgba(255, 122, 89, 0.16)";
+        readonly background: "#0d1018";
+        readonly backgroundAlt: "#13151C";
+        readonly surface: "#1a1e29";
+        readonly surfaceRaised: "#222a3a";
+        readonly surfaceSoft: "#282B36";
+        readonly border: "#363b4a";
+        readonly borderStrong: "#424655";
+        readonly textPrimary: "#FAF7F0";
+        readonly textSecondary: "#C8CCD9";
+        readonly textMuted: "#6B7080";
+        readonly accent: "#4F5BD5";
+        readonly accentStrong: "#6673D6";
+        readonly accentMuted: "rgba(79, 91, 213, 0.16)";
         readonly success: "#69c08a";
-        readonly danger: "#f07a7a";
+        readonly danger: "#E85C48";
         readonly shadow: "rgba(0, 0, 0, 0.32)";
         readonly haze: "rgba(255, 255, 255, 0.05)";
     };

package/dist/editor/studioTheme.js

@@ -1,23 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withAlpha = exports.studioTheme = void 0;
+exports.studioTheme = void 0;
+exports.withAlpha = withAlpha;
+// Self-contained theme. Palette is inspired by @sitebay/theme (slate dark
+// surfaces + indigo accent + parchment text) but intentionally NOT a hard
+// dependency — keeps this package standalone/publishable.
 exports.studioTheme = {
     colors: {
-        background: '#111315',
-        backgroundAlt: '#191d20',
-        surface: '#1c2125',
-        surfaceRaised: '#252b30',
-        surfaceSoft: '#2b3238',
-        border: '#394249',
-        borderStrong: '#53606a',
-        textPrimary: '#f6efe4',
-        textSecondary: '#cabfaa',
-        textMuted: '#8b847a',
-        accent: '#ff7a59',
-        accentStrong: '#ff9c72',
-        accentMuted: 'rgba(255, 122, 89, 0.16)',
+        background: '#0d1018',
+        backgroundAlt: '#13151C',
+        surface: '#1a1e29',
+        surfaceRaised: '#222a3a',
+        surfaceSoft: '#282B36',
+        border: '#363b4a',
+        borderStrong: '#424655',
+        textPrimary: '#FAF7F0',
+        textSecondary: '#C8CCD9',
+        textMuted: '#6B7080',
+        accent: '#4F5BD5',
+        accentStrong: '#6673D6',
+        accentMuted: 'rgba(79, 91, 213, 0.16)',
         success: '#69c08a',
-        danger: '#f07a7a',
+        danger: '#E85C48',
         shadow: 'rgba(0, 0, 0, 0.32)',
         haze: 'rgba(255, 255, 255, 0.05)',
     },
@@ -86,4 +90,3 @@ function withAlpha(hexOrRgb, alphaHex) {
     }
     return hexOrRgb;
 }
-exports.withAlpha = withAlpha;

package/dist/editor/types.d.ts

@@ -41,4 +41,5 @@ export interface AvatarEditorProps {
 }
 export interface FaceSqueezeEditorProps {
     onClose: () => void;
+    avatarModule?: unknown;
 }

package/dist/html/accessories.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generated avatar WebView accessories script section.
+ *
+ * Kept as a string builder so html.ts can compose the final document without
+ * owning every browser-side subsystem inline.
+ */
+export declare function buildAccessoriesScript(): string;

package/dist/html/accessories.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildAccessoriesScript = buildAccessoriesScript;
+/**
+ * Generated avatar WebView accessories script section.
+ *
+ * Kept as a string builder so html.ts can compose the final document without
+ * owning every browser-side subsystem inline.
+ */
+function buildAccessoriesScript() {
+    return `let THREE_REF = null;
+let gltfLoaderInstance = null;
+const currentAccessories = {};
+let pendingAccessoriesList = [];
+
+function disposeHierarchy(node) {
+  if (!node) return;
+  node.traverse((child) => {
+    if (child.isMesh) {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        const materials = Array.isArray(child.material) ? child.material : [child.material];
+        materials.forEach(mat => {
+          if (mat.map) mat.map.dispose();
+          if (mat.lightMap) mat.lightMap.dispose();
+          if (mat.bumpMap) mat.bumpMap.dispose();
+          if (mat.normalMap) mat.normalMap.dispose();
+          if (mat.specularMap) mat.specularMap.dispose();
+          if (mat.envMap) mat.envMap.dispose();
+          mat.dispose();
+        });
+      }
+    }
+  });
+}
+
+async function ensureThree() {
+  if (!THREE_REF) {
+    THREE_REF = await import('three');
+    const { GLTFLoader } = await import('three/addons/loaders/GLTFLoader.js');
+    const { DRACOLoader } = await import('three/addons/loaders/DRACOLoader.js');
+    gltfLoaderInstance = new GLTFLoader();
+    const dracoLoader = new DRACOLoader();
+    dracoLoader.setDecoderPath(DRACO_URL);
+    gltfLoaderInstance.setDRACOLoader(dracoLoader);
+  }
+}
+
+async function applyAccessories(accessoriesList) {
+  log('[ACC] applyAccessories called with ' + accessoriesList.length + ' items');
+  pendingAccessoriesList = accessoriesList;
+  await ensureThree();
+  const root = (head && head.armature) ? head.armature : staticModel;
+  log('[ACC] root=' + (root ? root.constructor.name + '/' + root.name : 'NULL') + ' head=' + !!head + ' head.armature=' + !!(head && head.armature) + ' staticModel=' + !!staticModel);
+  if (!root) { log('[ACC] ABORT: no root'); return; }
+
+  const boneNames = [];
+  root.traverse((child) => { if (child.isBone) boneNames.push(child.name); });
+  log('[ACC] Bones found: ' + boneNames.join(', '));
+
+  const newAccessoryIds = new Set(accessoriesList.map(a => a.id));
+  for (const id in currentAccessories) {
+    if (!newAccessoryIds.has(id)) {
+      const acc = currentAccessories[id];
+      if (acc.model) {
+        if (acc.model.parent) acc.model.parent.remove(acc.model);
+        disposeHierarchy(acc.model);
+      }
+      delete currentAccessories[id];
+      log('[ACC] Removed old accessory: ' + id);
+    }
+  }
+
+  for (const accData of accessoriesList) {
+    log('[ACC] Processing: id=' + accData.id + ' url=' + accData.url + ' bone=' + accData.bone);
+    const existing = currentAccessories[accData.id];
+
+    if (!existing || existing.url !== accData.url) {
+      if (existing && existing.model) {
+        if (existing.model.parent) existing.model.parent.remove(existing.model);
+        disposeHierarchy(existing.model);
+      }
+      currentAccessories[accData.id] = { ...accData, model: null, isLoading: true, latestData: accData };
+      log('[ACC] Starting GLB load: ' + accData.url);
+      (async () => {
+        try {
+          const loadedUrl = await loadWithAuth(accData.url);
+          gltfLoaderInstance.load(loadedUrl, (gltf) => {
+            if (loadedUrl.startsWith('blob:')) URL.revokeObjectURL(loadedUrl);
+            log('[ACC] GLB loaded OK for ' + accData.id);
+            const model = gltf.scene;
+            const latestData = (currentAccessories[accData.id] && currentAccessories[accData.id].latestData) || accData;
+            let targetBone = null;
+            let prefixCandidate = null;
+            root.traverse((child) => {
+              if (child.isBone && child.name === latestData.bone) targetBone = child;
+              else if (!prefixCandidate && child.name.replace(/_\\d+$/, '') === latestData.bone) prefixCandidate = child;
+            });
+            if (!targetBone && prefixCandidate) {
+              targetBone = prefixCandidate;
+              log('[ACC] Prefix match bone: ' + targetBone.name);
+            }
+            model.traverse((child) => { if (child.isMesh) child.frustumCulled = false; });
+            if (!targetBone) { log('[ACC] Bone not found: ' + latestData.bone + '. Using root.'); targetBone = root; }
+            else log('[ACC] Found bone: ' + targetBone.name);
+            const modelScale = latestData.scale !== undefined ? latestData.scale : 1.0;
+            model.scale.set(modelScale, modelScale, modelScale);
+            model.position.set(
+              latestData.position ? latestData.position[0] : 0,
+              latestData.position ? latestData.position[1] : 0,
+              latestData.position ? latestData.position[2] : 0
+            );
+            if (latestData.rotation) model.rotation.set(...latestData.rotation);
+            if (!currentAccessories[accData.id] || currentAccessories[accData.id].url !== accData.url) {
+              log('[ACC] Aborting: ' + accData.id + ' changed while loading.');
+              return;
+            }
+            targetBone.add(model);
+            log('[ACC] Attached to ' + targetBone.name);
+            currentAccessories[accData.id].model = model;
+            currentAccessories[accData.id].isLoading = false;
+          }, () => {}, (err) => {
+            if (loadedUrl.startsWith('blob:')) URL.revokeObjectURL(loadedUrl);
+            log('[ACC] FAILED: ' + accData.id + ': ' + err.message);
+            if (currentAccessories[accData.id]) currentAccessories[accData.id].isLoading = false;
+          });
+        } catch (authErr) {
+          log('[ACC] Auth fetch failed ' + accData.id + ': ' + authErr.message);
+          if (currentAccessories[accData.id]) currentAccessories[accData.id].isLoading = false;
+        }
+      })();
+    } else if (existing && existing.isLoading) {
+      existing.latestData = accData;
+    } else if (existing && existing.model) {
+      const model = existing.model;
+      const accScale = accData.scale !== undefined ? accData.scale : 1.0;
+      model.scale.set(accScale, accScale, accScale);
+      model.position.set(
+        accData.position ? accData.position[0] : 0,
+        accData.position ? accData.position[1] : 0,
+        accData.position ? accData.position[2] : 0
+      );
+      if (accData.rotation) model.rotation.set(...accData.rotation);
+    }
+  }
+}
+
+`;
+}

package/dist/html/motion.d.ts

@@ -0,0 +1 @@
+export declare function buildMotionScript(): string;