talking-head-studio 0.4.0 → 0.4.2

package/dist/filament/editor/FilamentEditor.js

@@ -1,880 +0,0 @@
-"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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilamentEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const vector_icons_1 = require("@expo/vector-icons");
-const Haptics = __importStar(require("expo-haptics"));
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_filament_1 = require("react-native-filament");
-const react_native_gesture_handler_1 = require("react-native-gesture-handler");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const useAuthedFilamentUri_1 = require("../useAuthedFilamentUri");
-const boneSnap_1 = require("./boneSnap");
-const studioApi_1 = require("../../api/studioApi");
-const PrecisionPanel_1 = __importDefault(require("./PrecisionPanel"));
-const studioTheme_1 = require("./studioTheme");
-// Lazy require avoids mixing require/import at module top level (Metro bug).
-// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any
-const useCameraManipulator = require('react-native-filament').useCameraManipulator;
-// Pure JS transform helpers (no 'worklet' directive — avoids Reanimated
-// babel plugin serializing gesture closure variables).
-function applyDragTranslate(startPos, translationX, translationY, sensitivity) {
-    return [
-        startPos[0] + translationX * sensitivity,
-        startPos[1] - translationY * sensitivity,
-        startPos[2],
-    ];
-}
-function applyPinchScale(startScale, scaleFactor) {
-    const clamp = (val) => Math.max(0.1, Math.min(val, 10));
-    return [
-        clamp(startScale[0] * scaleFactor),
-        clamp(startScale[1] * scaleFactor),
-        clamp(startScale[2] * scaleFactor),
-    ];
-}
-function applyRotation(startRot, deltaX, deltaY) {
-    return [startRot[0] + deltaY, startRot[1] + deltaX, startRot[2]];
-}
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const MAX_SLOTS = 4; // Adreno 612 (Moto G Stylus) GPU runs out of texture memory with >4 large GLBs
-const MAX_ACCESSORY_BYTES = 50 * 1024 * 1024; // 50 MB total budget for accessory GLBs
-const WORLD_RANGE = 4; // total world units the view spans (~4m for a humanoid scene)
-const DEFAULT_VIEW_WIDTH = 390; // fallback for pre-layout
-const COLORS = {
-    bg: studioTheme_1.studioTheme.colors.background,
-    surface: studioTheme_1.studioTheme.colors.surface,
-    card: studioTheme_1.studioTheme.colors.surfaceRaised,
-    border: studioTheme_1.studioTheme.colors.border,
-    accent: studioTheme_1.studioTheme.colors.accent,
-    textPrimary: studioTheme_1.studioTheme.colors.textPrimary,
-    textSecondary: studioTheme_1.studioTheme.colors.textSecondary,
-};
-/**
- * Downloads a URL with auth, loads it into Filament, and only renders
- * AuthedModelInner once the file is cached locally.
- */
-function AuthedModel({ url, onFileSize, ...modelProps }) {
-    const fileResult = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(url);
-    const reportedRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (fileResult && !reportedRef.current) {
-            reportedRef.current = true;
-            onFileSize?.(fileResult.size);
-        }
-    }, [fileResult, onFileSize]);
-    if (!fileResult) {
-        console.log('[FilamentEditor] AuthedModel waiting for download:', url.slice(-40));
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(AuthedModelInner, { localUri: fileResult.uri, ...modelProps });
-}
-/**
- * Throttled transform updates via setTimeout (max ~5fps during gesture).
- *
- * Previous approaches all crashed on Adreno 612:
- * - React state + useEffect (300 JNI/sec) → SIGABRT (FabricUIManager null)
- * - Choreographer + Mat4 chain → SIGSEGV in Hermes (temp JSI objects freed)
- * - Direct imperative calls → SIGSEGV in libGLESv2_adreno (memcpy race)
- *
- * This approach: gesture handlers write to a ref (zero native calls), a
- * setTimeout at 200ms intervals drains pending values with isValid guards
- * and try/catch. 5 native flushes/sec is safe for Adreno 612.
- */
-const TRANSFORM_THROTTLE_MS = 200;
-/** Largest axis of a new accessory's bounding box will be clamped to this (world units ≈ metres). */
-const AUTO_NORMALIZE_MAX_SIZE = 0.4;
-function AuthedModelInner({ localUri, initialTranslate, initialRotate, initialScale, onPress, onLoaded, onTransformReady, autoNormalizeMaxSize, boneWorldPos, onAutoNormalized, }) {
-    const model = (0, react_native_filament_1.useModel)({ uri: localUri });
-    const { transformManager } = (0, react_native_filament_1.useFilamentContext)();
-    const notifiedRef = (0, react_1.useRef)(false);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const entityRef = (0, react_1.useRef)(undefined);
-    const pendingTransform = (0, react_1.useRef)(null);
-    const pendingDirty = (0, react_1.useRef)(false);
-    const throttleTimer = (0, react_1.useRef)(null);
-    const unmounted = (0, react_1.useRef)(false);
-    // Apply pending transform with safety guards
-    const flushTransform = (0, react_1.useCallback)(() => {
-        if (unmounted.current)
-            return;
-        const entity = entityRef.current;
-        if (!entity || !pendingDirty.current)
-            return;
-        const xform = pendingTransform.current;
-        if (!xform)
-            return;
-        if (!transformManager.isValid)
-            return;
-        pendingDirty.current = false;
-        try {
-            transformManager.setEntityScale(entity, xform.s, false);
-            transformManager.setEntityRotation(entity, xform.r[0], [1, 0, 0], true);
-            transformManager.setEntityRotation(entity, xform.r[1], [0, 1, 0], true);
-            transformManager.setEntityRotation(entity, xform.r[2], [0, 0, 1], true);
-            transformManager.setEntityPosition(entity, xform.t, true);
-        }
-        catch (e) {
-            console.warn('[FilamentEditor] Transform failed (native object may be freed):', e);
-        }
-    }, [transformManager]);
-    // Queue a transform — writes to ref, schedules throttled native flush
-    const queueTransform = (0, react_1.useCallback)((t, r, s) => {
-        pendingTransform.current = { t, r, s };
-        pendingDirty.current = true;
-        // Deduplicated throttle: one timer at a time
-        if (!throttleTimer.current && !unmounted.current) {
-            throttleTimer.current = setTimeout(() => {
-                throttleTimer.current = null;
-                flushTransform();
-            }, TRANSFORM_THROTTLE_MS);
-        }
-    }, [flushTransform]);
-    // Cleanup on unmount
-    (0, react_1.useEffect)(() => {
-        unmounted.current = false;
-        return () => {
-            unmounted.current = true;
-            if (throttleTimer.current) {
-                clearTimeout(throttleTimer.current);
-                throttleTimer.current = null;
-            }
-        };
-    }, []);
-    // Once loaded: apply initial transform (with optional auto-normalization), notify parent
-    (0, react_1.useEffect)(() => {
-        if (model.state !== 'loaded')
-            return;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        entityRef.current = model.rootEntity;
-        if (!notifiedRef.current) {
-            notifiedRef.current = true;
-            let t = initialTranslate ?? [0, 0, 0];
-            const r = initialRotate ?? [0, 0, 0];
-            let s = initialScale ?? [1, 1, 1];
-            // Auto-normalize: scale model so its largest AABB dimension ≤ autoNormalizeMaxSize,
-            // then center it on the bone position.
-            // In Filament TRS order: world_vertex = position + scale * local_vertex
-            // So to put the bbox center at bone pos: position = bonePos - center * scale
-            const bb = model.boundingBox;
-            if (autoNormalizeMaxSize && bb) {
-                const { center, halfExtent } = bb;
-                const minY = center[1] - halfExtent[1]; // bottom of bbox in local space
-                const maxExtent = Math.max(halfExtent[0], halfExtent[1], halfExtent[2]) * 2;
-                if (maxExtent > 0) {
-                    const uniformScale = Math.min(autoNormalizeMaxSize / maxExtent, 1.0);
-                    s = [uniformScale, uniformScale, uniformScale];
-                    const bone = boneWorldPos ?? [0, 0, 0];
-                    t = [
-                        bone[0] - center[0] * uniformScale,
-                        bone[1] - minY * uniformScale,
-                        bone[2] - center[2] * uniformScale,
-                    ];
-                    const relOffset = [
-                        -center[0] * uniformScale,
-                        -minY * uniformScale,
-                        -center[2] * uniformScale,
-                    ];
-                    console.log(`[FilamentEditor] Auto-normalized: maxExtent=${maxExtent.toFixed(3)} → scale=${uniformScale.toFixed(4)}`);
-                    onAutoNormalized?.(relOffset, uniformScale);
-                }
-            }
-            pendingTransform.current = { t, r, s };
-            pendingDirty.current = true;
-            flushTransform();
-            onTransformReady?.(queueTransform);
-            onLoaded?.();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [model.state]);
-    if (model.state === 'loading')
-        return null;
-    const MR = react_native_filament_1.ModelRenderer;
-    return (0, jsx_runtime_1.jsx)(MR, { model: model, onPress: onPress });
-}
-// ---------------------------------------------------------------------------
-// AvatarModel — loads avatar and signals when ready (no transforms needed)
-// ---------------------------------------------------------------------------
-const SKIN_MATERIAL_KEYWORDS = ['skin', 'body', 'flesh', 'face', 'head'];
-function hexToFloat4(hex) {
-    const cleaned = hex.replace('#', '');
-    const r = parseInt(cleaned.slice(0, 2), 16) / 255;
-    const g = parseInt(cleaned.slice(2, 4), 16) / 255;
-    const b = parseInt(cleaned.slice(4, 6), 16) / 255;
-    return [r, g, b, 1.0];
-}
-function AvatarModel({ uri, onLoaded, skinColor }) {
-    const model = (0, react_native_filament_1.useModel)({ uri });
-    const didNotify = (0, react_1.useRef)(false);
-    const { renderableManager } = (0, react_native_filament_1.useFilamentContext)();
-    (0, react_1.useEffect)(() => {
-        if (model.state === 'loaded' && !didNotify.current) {
-            didNotify.current = true;
-            onLoaded();
-        }
-    }, [model.state, onLoaded]);
-    (0, react_1.useEffect)(() => {
-        if (model.state !== 'loaded' || !skinColor)
-            return;
-        const color = hexToFloat4(skinColor);
-        const entities = model.asset.getRenderableEntities();
-        const skinEntities = [];
-        // First pass: collect entities with skin-named materials
-        for (const entity of entities) {
-            const count = renderableManager.getPrimitiveCount(entity);
-            for (let i = 0; i < count; i++) {
-                const mi = renderableManager.getMaterialInstanceAt(entity, i);
-                const lower = (mi.name ?? '').toLowerCase();
-                if (SKIN_MATERIAL_KEYWORDS.some((k) => lower.includes(k))) {
-                    mi.setFloat4Parameter('baseColorFactor', color);
-                    skinEntities.push(entity);
-                    break;
-                }
-            }
-        }
-        // Fallback: if no skin-named materials found, tint everything
-        if (skinEntities.length === 0) {
-            for (const entity of entities) {
-                const count = renderableManager.getPrimitiveCount(entity);
-                for (let i = 0; i < count; i++) {
-                    const mi = renderableManager.getMaterialInstanceAt(entity, i);
-                    mi.setFloat4Parameter('baseColorFactor', color);
-                }
-            }
-        }
-    }, [model.state, skinColor, renderableManager]);
-    if (model.state === 'loading')
-        return null;
-    const MR = react_native_filament_1.ModelRenderer;
-    return (0, jsx_runtime_1.jsx)(MR, { model: model, castShadow: true, receiveShadow: true });
-}
-// ---------------------------------------------------------------------------
-// Outer component — provides <FilamentScene> context
-// ---------------------------------------------------------------------------
-function FilamentEditor(props) {
-    return ((0, jsx_runtime_1.jsx)(react_native_filament_1.FilamentScene, { children: (0, jsx_runtime_1.jsx)(FilamentEditorContent, { ...props }) }));
-}
-exports.FilamentEditor = FilamentEditor;
-// ---------------------------------------------------------------------------
-// Inner component — has access to Filament context
-// ---------------------------------------------------------------------------
-function FilamentEditorContent({ avatarUrl, style, onDone, skinColor, equipped, placements, activeAssetId, onActiveAssetChange, onPlacementChange, }) {
-    // Pre-download avatar GLB with auth (Filament's native fetcher doesn't send auth headers)
-    const avatarFile = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(avatarUrl);
-    const localAvatarUri = avatarFile?.uri ?? null;
-    // Track whether the avatar model has been loaded by Filament's native engine.
-    // Accessories must NOT mount until the avatar is ready — loading two models
-    // concurrently causes a null-pointer crash in the Adreno GPU driver's
-    // SurfaceTexture thread (SEGV_MAPERR in libGLESv2_adreno.so → memcpy).
-    const [avatarReady, setAvatarReady] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        console.log('[FilamentEditor] avatarUrl:', avatarUrl);
-        console.log('[FilamentEditor] localAvatarUri:', localAvatarUri);
-        console.log('[FilamentEditor] equipped slots:', Object.keys(equipped).length);
-    }, [avatarUrl, localAvatarUri, equipped]);
-    // -------------------------------------------------------------------------
-    // Local state
-    // -------------------------------------------------------------------------
-    const [showPrecision, setShowPrecision] = (0, react_1.useState)(false);
-    const [viewWidth, setViewWidth] = (0, react_1.useState)(DEFAULT_VIEW_WIDTH);
-    const sensitivity = (0, react_1.useMemo)(() => WORLD_RANGE / viewWidth, [viewWidth]);
-    // -------------------------------------------------------------------------
-    // Camera
-    // -------------------------------------------------------------------------
-    const manipulator = useCameraManipulator({
-        orbitHomePosition: [0, 1.6, 1.8],
-        targetPosition: [0, 1.5, 0],
-    });
-    // -------------------------------------------------------------------------
-    // Transform state — refs only (no React state for transforms)
-    //
-    // Transforms are applied imperatively via slotTransformApply refs.
-    // React state is NOT used for per-frame transform updates during gesture —
-    // that pattern causes 300+ JNI calls/second → FabricUIManager null crash.
-    // -------------------------------------------------------------------------
-    // Refs: current transform values (synchronous read/write in gesture handlers)
-    const positionRefs = (0, react_1.useRef)(Array.from({ length: MAX_SLOTS }, () => [0, 0, 0]));
-    const rotationRefs = (0, react_1.useRef)(Array.from({ length: MAX_SLOTS }, () => [0, 0, 0]));
-    const scaleRefs = (0, react_1.useRef)(Array.from({ length: MAX_SLOTS }, () => [1, 1, 1]));
-    // Imperative transform handles: set by AuthedModelInner once model is loaded
-    const slotTransformApply = (0, react_1.useRef)(Array.from({ length: MAX_SLOTS }, () => null));
-    // Slots that have no saved placement yet — eligible for bounding-box auto-normalization
-    const newAccessorySlots = (0, react_1.useRef)(new Set());
-    // Apply transforms directly — no setState, no re-render, no useEffect
-    const applySlotTransform = (0, react_1.useCallback)((slotIdx, pos, rot, scl) => {
-        positionRefs.current[slotIdx] = pos;
-        rotationRefs.current[slotIdx] = rot;
-        scaleRefs.current[slotIdx] = scl;
-        slotTransformApply.current[slotIdx]?.(pos, rot, scl);
-    }, []);
-    // Selection pulse animation (Reanimated for UI animations)
-    const selectionScale = (0, react_native_reanimated_1.useSharedValue)(1);
-    // -------------------------------------------------------------------------
-    // Map equipped assets → fixed slot indices
-    // -------------------------------------------------------------------------
-    const slotMappings = (0, react_1.useMemo)(() => {
-        const assets = Object.values(equipped).filter(Boolean);
-        if (assets.length > MAX_SLOTS) {
-            console.warn(`[FilamentEditor] ${assets.length} accessories equipped but max is ${MAX_SLOTS} for this GPU. ` +
-                `${assets.length - MAX_SLOTS} will not render in the editor.`);
-        }
-        return assets.slice(0, MAX_SLOTS).map((asset) => ({
-            assetId: asset.id,
-            asset,
-        }));
-    }, [equipped]);
-    // Reverse lookup: assetId → slot index
-    const assetIdToSlot = (0, react_1.useMemo)(() => {
-        const map = {};
-        slotMappings.forEach((m, i) => {
-            map[m.assetId] = i;
-        });
-        return map;
-    }, [slotMappings]);
-    // -------------------------------------------------------------------------
-    // Sync prop placements → transform refs (only on equip/unequip, not every
-    // placement update — gestures write refs directly, so re-syncing on every
-    // onPlacementChange would cause a circular update and stutter)
-    // -------------------------------------------------------------------------
-    (0, react_1.useEffect)(() => {
-        for (let i = 0; i < slotMappings.length; i++) {
-            const { assetId, asset } = slotMappings[i];
-            const p = placements[assetId];
-            if (p) {
-                const bonePos = boneSnap_1.HUMANOID_BONES[p.bone] ?? boneSnap_1.HUMANOID_BONES['Head'];
-                const worldPos = [
-                    p.position[0] + bonePos[0],
-                    p.position[1] + bonePos[1],
-                    p.position[2] + bonePos[2],
-                ];
-                positionRefs.current[i] = worldPos;
-                rotationRefs.current[i] = p.rotation;
-                scaleRefs.current[i] = [p.scale, p.scale, p.scale];
-            }
-            else {
-                // Auto-snap: place new accessories at their attach_bone position
-                const boneName = asset.attach_bone ?? 'Head';
-                const bonePos = boneSnap_1.HUMANOID_BONES[boneName] ?? boneSnap_1.HUMANOID_BONES['Head'];
-                positionRefs.current[i] = bonePos;
-                rotationRefs.current[i] = [0, 0, 0];
-                scaleRefs.current[i] = [1, 1, 1];
-                // Mark for auto-normalization (bounding box read after GLB loads)
-                newAccessorySlots.current.add(i);
-                // Persist the initial placement via prop callback
-                onPlacementChange(assetId, {
-                    bone: boneName,
-                    position: [0, 0, 0],
-                    rotation: [0, 0, 0],
-                    scale: 1,
-                });
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [slotMappings]);
-    // -------------------------------------------------------------------------
-    // React to prop placement changes (from PrecisionPanel sliders) and sync
-    // them to the 3D scene so the model updates live.
-    // Skipped during active gestures (gesture handlers update refs directly).
-    // -------------------------------------------------------------------------
-    const isGestureActive = (0, react_1.useRef)(false);
-    // Track prev placements to diff — only sync changed entries
-    const prevPlacementsRef = (0, react_1.useRef)(placements);
-    (0, react_1.useEffect)(() => {
-        if (isGestureActive.current) {
-            prevPlacementsRef.current = placements;
-            return;
-        }
-        const prevPlacements = prevPlacementsRef.current;
-        prevPlacementsRef.current = placements;
-        if (placements === prevPlacements)
-            return;
-        for (let i = 0; i < slotMappings.length; i++) {
-            const { assetId } = slotMappings[i];
-            const p = placements[assetId];
-            const prev = prevPlacements[assetId];
-            if (!p || p === prev)
-                continue;
-            const bonePos = boneSnap_1.HUMANOID_BONES[p.bone] ?? boneSnap_1.HUMANOID_BONES['Head'];
-            const worldPos = [
-                p.position[0] + bonePos[0],
-                p.position[1] + bonePos[1],
-                p.position[2] + bonePos[2],
-            ];
-            positionRefs.current[i] = worldPos;
-            rotationRefs.current[i] = p.rotation;
-            scaleRefs.current[i] = [p.scale, p.scale, p.scale];
-            applySlotTransform(i, worldPos, p.rotation, [p.scale, p.scale, p.scale]);
-        }
-    }, [placements, slotMappings, applySlotTransform]);
-    // -------------------------------------------------------------------------
-    // Gesture start snapshots (stored in refs for worklet access)
-    // -------------------------------------------------------------------------
-    const gestureStartPos = (0, react_1.useRef)([0, 0, 0]);
-    const gestureStartScale = (0, react_1.useRef)([1, 1, 1]);
-    const gestureStartRot = (0, react_1.useRef)([0, 0, 0]);
-    const isTouchingAccessory = (0, react_1.useRef)(false);
-    const hitScaleBound = (0, react_1.useRef)(false);
-    // Pending commit: written during gesture updates so commitActiveTransform
-    // doesn't need to read from positionRefs/rotationRefs/scaleRefs (which may
-    // be frozen by Reanimated's babel plugin serialization).
-    const pendingCommit = (0, react_1.useRef)(null);
-    // -------------------------------------------------------------------------
-    // Helpers
-    // -------------------------------------------------------------------------
-    const onLayout = (0, react_1.useCallback)((e) => {
-        setViewWidth(e.nativeEvent.layout.width);
-    }, []);
-    const selectAccessory = (0, react_1.useCallback)((assetId) => {
-        onActiveAssetChange(assetId);
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-        // Selection pulse
-        selectionScale.value = (0, react_native_reanimated_1.withSpring)(1.05, { damping: 8, stiffness: 300 }, () => {
-            selectionScale.value = (0, react_native_reanimated_1.withSpring)(1, { damping: 12, stiffness: 200 });
-        });
-    }, [onActiveAssetChange, selectionScale]);
-    const deselectAccessory = (0, react_1.useCallback)(() => {
-        onActiveAssetChange(null);
-        setShowPrecision(false);
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    }, [onActiveAssetChange]);
-    const commitActiveTransform = (0, react_1.useCallback)(() => {
-        const commit = pendingCommit.current;
-        if (!commit)
-            return;
-        // Use the current placement from props to get the bone (read from prop — up-to-date)
-        const currentPlacement = placements[commit.assetId];
-        const bone = currentPlacement?.bone ?? 'Head';
-        const bonePos = boneSnap_1.HUMANOID_BONES[bone] ?? boneSnap_1.HUMANOID_BONES['Head'];
-        const relativePos = [
-            commit.pos[0] - bonePos[0],
-            commit.pos[1] - bonePos[1],
-            commit.pos[2] - bonePos[2],
-        ];
-        onPlacementChange(commit.assetId, {
-            bone,
-            position: relativePos,
-            rotation: [...commit.rot],
-            scale: commit.scl[0], // uniform scale
-        });
-        pendingCommit.current = null;
-    }, [onPlacementChange, placements]);
-    const snapToNearestBone = (0, react_1.useCallback)(() => {
-        if (!activeAssetId)
-            return;
-        const slotIdx = assetIdToSlot[activeAssetId];
-        if (slotIdx === undefined)
-            return;
-        const pos = positionRefs.current[slotIdx];
-        const nearest = (0, boneSnap_1.findNearestBone)([...pos]);
-        positionRefs.current[slotIdx] = nearest.position;
-        applySlotTransform(slotIdx, nearest.position, rotationRefs.current[slotIdx], scaleRefs.current[slotIdx]);
-        // Read fresh from prop placements (passed in as a stable-enough reference)
-        const currentPlacement = placements[activeAssetId];
-        onPlacementChange(activeAssetId, {
-            bone: nearest.bone,
-            position: [0, 0, 0], // Snapping directly to a bone means 0 relative offset
-            rotation: currentPlacement?.rotation ?? [0, 0, 0],
-            scale: currentPlacement?.scale ?? 1,
-        });
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeAssetId, assetIdToSlot, onPlacementChange, placements]);
-    const resetToAttachBone = (0, react_1.useCallback)(() => {
-        if (!activeAssetId)
-            return;
-        const slotIdx = assetIdToSlot[activeAssetId];
-        if (slotIdx === undefined)
-            return;
-        const asset = slotMappings[slotIdx]?.asset;
-        const boneName = asset?.attach_bone ?? 'Head';
-        const bonePos = boneSnap_1.HUMANOID_BONES[boneName] ?? boneSnap_1.HUMANOID_BONES['Head'];
-        positionRefs.current[slotIdx] = bonePos;
-        rotationRefs.current[slotIdx] = [0, 0, 0];
-        scaleRefs.current[slotIdx] = [1, 1, 1];
-        applySlotTransform(slotIdx, bonePos, [0, 0, 0], [1, 1, 1]);
-        onPlacementChange(activeAssetId, {
-            bone: boneName,
-            position: [0, 0, 0], // Relative to attach bone is 0
-            rotation: [0, 0, 0],
-            scale: 1,
-        });
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeAssetId, assetIdToSlot, slotMappings, onPlacementChange]);
-    // -------------------------------------------------------------------------
-    // Entity picking — stable onPress callbacks per assetId
-    // -------------------------------------------------------------------------
-    const onPressCallbacks = (0, react_1.useRef)({});
-    // Rebuild only when selectAccessory reference changes (i.e. almost never)
-    (0, react_1.useEffect)(() => {
-        onPressCallbacks.current = {};
-    }, [selectAccessory]);
-    const getOnPress = (0, react_1.useCallback)((assetId) => {
-        if (!onPressCallbacks.current[assetId]) {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onPressCallbacks.current[assetId] = (_entity, _modelEntities) => {
-                selectAccessory(assetId);
-                isTouchingAccessory.current = true;
-            };
-        }
-        return onPressCallbacks.current[assetId];
-    }, [selectAccessory]);
-    // Sequential accessory mounting with GPU memory budget (50 MB).
-    // Loading multiple large GLBs simultaneously crashes the Adreno GPU driver
-    // (SIGSEGV in JNISurfaceTextu when buffers arrive while render thread is busy).
-    // The budget prevents loading so many that the GPU runs out of texture memory.
-    const [mountedSlots, setMountedSlots] = (0, react_1.useState)(0);
-    const totalLoadedBytes = (0, react_1.useRef)(0);
-    const [budgetExhausted, setBudgetExhausted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (avatarReady && mountedSlots === 0 && slotMappings.length > 0) {
-            setMountedSlots(1);
-        }
-    }, [avatarReady, slotMappings.length, mountedSlots]);
-    const onAccessoryFileSize = (0, react_1.useCallback)((bytes) => {
-        totalLoadedBytes.current += bytes;
-        console.log(`[FilamentEditor] Accessory loaded: ${(bytes / 1024 / 1024).toFixed(1)}MB, ` +
-            `total: ${(totalLoadedBytes.current / 1024 / 1024).toFixed(1)}MB / ${(MAX_ACCESSORY_BYTES / 1024 / 1024).toFixed(0)}MB`);
-        if (totalLoadedBytes.current >= MAX_ACCESSORY_BYTES) {
-            console.warn('[FilamentEditor] GPU memory budget exhausted — skipping remaining accessories');
-            setBudgetExhausted(true);
-        }
-    }, []);
-    const onAccessoryLoaded = (0, react_1.useCallback)(() => {
-        if (totalLoadedBytes.current >= MAX_ACCESSORY_BYTES) {
-            console.warn('[FilamentEditor] GPU budget reached — not mounting more accessories');
-            return;
-        }
-        setMountedSlots((prev) => Math.min(prev + 1, slotMappings.length));
-    }, [slotMappings.length]);
-    // --- Pan: drag accessory (if active) or orbit camera ---
-    // .runOnJS(true) ensures callbacks run on JS thread without Reanimated
-    // serialization, so refs are accessible and mutable.
-    const panGesture = react_native_gesture_handler_1.Gesture.Pan()
-        .maxPointers(1)
-        .runOnJS(true)
-        .onBegin((e) => {
-        if (activeAssetId) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                gestureStartPos.current = [...positionRefs.current[slotIdx]];
-                isTouchingAccessory.current = true;
-                isGestureActive.current = true;
-                pendingCommit.current = {
-                    assetId: activeAssetId,
-                    slotIdx,
-                    pos: [...positionRefs.current[slotIdx]],
-                    rot: [...rotationRefs.current[slotIdx]],
-                    scl: [...scaleRefs.current[slotIdx]],
-                };
-                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-            }
-        }
-        else if (manipulator) {
-            manipulator.grabBegin(e.x, e.y, false);
-        }
-    })
-        .onUpdate((e) => {
-        if (activeAssetId && isTouchingAccessory.current) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                const newPos = applyDragTranslate(gestureStartPos.current, e.translationX, e.translationY, sensitivity);
-                applySlotTransform(slotIdx, newPos, rotationRefs.current[slotIdx], scaleRefs.current[slotIdx]);
-                // Keep pendingCommit up to date with latest position
-                if (pendingCommit.current) {
-                    pendingCommit.current.pos = newPos;
-                }
-            }
-        }
-        else if (manipulator) {
-            manipulator.grabUpdate(e.x, e.y);
-        }
-    })
-        .onEnd(() => {
-        if (activeAssetId && isTouchingAccessory.current) {
-            commitActiveTransform();
-        }
-        if (manipulator) {
-            manipulator.grabEnd();
-        }
-        isTouchingAccessory.current = false;
-        isGestureActive.current = false;
-    })
-        .minDistance(5);
-    // --- Pinch: scale accessory (if active) or zoom camera ---
-    const pinchGesture = react_native_gesture_handler_1.Gesture.Pinch()
-        .runOnJS(true)
-        .onBegin(() => {
-        if (activeAssetId) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                gestureStartScale.current = [...scaleRefs.current[slotIdx]];
-                hitScaleBound.current = false;
-                isGestureActive.current = true;
-                pendingCommit.current = {
-                    assetId: activeAssetId,
-                    slotIdx,
-                    pos: [...positionRefs.current[slotIdx]],
-                    rot: [...rotationRefs.current[slotIdx]],
-                    scl: [...scaleRefs.current[slotIdx]],
-                };
-                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-            }
-        }
-    })
-        .onUpdate((e) => {
-        if (activeAssetId) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                const newScale = applyPinchScale(gestureStartScale.current, e.scale);
-                applySlotTransform(slotIdx, positionRefs.current[slotIdx], rotationRefs.current[slotIdx], newScale);
-                if (pendingCommit.current) {
-                    pendingCommit.current.scl = newScale;
-                }
-                // Haptic feedback at scale boundaries (0.1 or 10)
-                const atBound = newScale[0] <= 0.1 || newScale[0] >= 10;
-                if (atBound && !hitScaleBound.current) {
-                    hitScaleBound.current = true;
-                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
-                }
-                else if (!atBound) {
-                    hitScaleBound.current = false;
-                }
-            }
-        }
-        else if (manipulator) {
-            manipulator.scroll(e.focalX, e.focalY, (1 - e.scale) * 2);
-        }
-    })
-        .onEnd(() => {
-        isGestureActive.current = false;
-        if (activeAssetId) {
-            commitActiveTransform();
-        }
-    });
-    // --- Rotation: rotate accessory Y axis ---
-    const rotationGesture = react_native_gesture_handler_1.Gesture.Rotation()
-        .runOnJS(true)
-        .onBegin(() => {
-        if (activeAssetId) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                gestureStartRot.current = [...rotationRefs.current[slotIdx]];
-                isGestureActive.current = true;
-                pendingCommit.current = {
-                    assetId: activeAssetId,
-                    slotIdx,
-                    pos: [...positionRefs.current[slotIdx]],
-                    rot: [...rotationRefs.current[slotIdx]],
-                    scl: [...scaleRefs.current[slotIdx]],
-                };
-                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-            }
-        }
-    })
-        .onUpdate((e) => {
-        if (activeAssetId) {
-            const slotIdx = assetIdToSlot[activeAssetId];
-            if (slotIdx !== undefined) {
-                const newRot = applyRotation(gestureStartRot.current, e.rotation, 0);
-                applySlotTransform(slotIdx, positionRefs.current[slotIdx], newRot, scaleRefs.current[slotIdx]);
-                if (pendingCommit.current) {
-                    pendingCommit.current.rot = newRot;
-                }
-            }
-        }
-    })
-        .onEnd(() => {
-        isGestureActive.current = false;
-        if (activeAssetId) {
-            commitActiveTransform();
-        }
-    });
-    // --- Long press: bone snap ---
-    const longPressGesture = react_native_gesture_handler_1.Gesture.LongPress()
-        .runOnJS(true)
-        .minDuration(500)
-        .onEnd((_e, success) => {
-        if (success && activeAssetId) {
-            snapToNearestBone();
-        }
-    });
-    // Compose gestures:
-    // We use Simultaneous for everything because placing Pan in a Race with Pinch
-    // means the first finger touching the screen locks out Pinch completely!
-    const pinchRotate = react_native_gesture_handler_1.Gesture.Simultaneous(pinchGesture, rotationGesture);
-    const mainGesture = react_native_gesture_handler_1.Gesture.Simultaneous(longPressGesture, panGesture, pinchRotate);
-    // -------------------------------------------------------------------------
-    // Overlay animated styles
-    // -------------------------------------------------------------------------
-    const overlayOpacity = (0, react_native_reanimated_1.useSharedValue)(activeAssetId ? 1 : 0);
-    (0, react_1.useEffect)(() => {
-        overlayOpacity.value = (0, react_native_reanimated_1.withTiming)(activeAssetId ? 1 : 0, { duration: 200 });
-    }, [activeAssetId, overlayOpacity]);
-    const overlayAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        opacity: overlayOpacity.value,
-        pointerEvents: overlayOpacity.value > 0.5 ? 'auto' : 'none',
-    }));
-    // Selection pulse applied to the asset name badge
-    const selectionBadgeStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        transform: [{ scale: selectionScale.value }],
-    }));
-    // Find active asset name for overlay
-    const activeAssetName = (0, react_1.useMemo)(() => {
-        if (!activeAssetId)
-            return '';
-        const mapping = slotMappings.find((m) => m.assetId === activeAssetId);
-        return mapping?.asset.name ?? 'Accessory';
-    }, [activeAssetId, slotMappings]);
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: mainGesture, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sceneContainer, children: (0, jsx_runtime_1.jsxs)(react_native_filament_1.FilamentView, { style: styles.filamentView, children: [(0, jsx_runtime_1.jsx)(react_native_filament_1.DefaultLight, {}), manipulator && react_native_filament_1.Camera({ cameraManipulator: manipulator }), localAvatarUri && ((0, jsx_runtime_1.jsx)(AvatarModel, { uri: localAvatarUri, skinColor: skinColor, onLoaded: () => {
-                                    console.log('[FilamentEditor] Avatar model loaded, accessories may now mount');
-                                    setAvatarReady(true);
-                                } })), slotMappings.slice(0, mountedSlots).map((mapping, slotIdx) => {
-                                if (slotIdx >= MAX_SLOTS) {
-                                    console.warn('[FilamentEditor] Too many accessories, skipping:', mapping.assetId);
-                                    return null;
-                                }
-                                return ((0, jsx_runtime_1.jsx)(AuthedModel, { url: (0, studioApi_1.assetFileUrl)(mapping.asset), initialTranslate: positionRefs.current[slotIdx], initialRotate: rotationRefs.current[slotIdx], initialScale: scaleRefs.current[slotIdx], onFileSize: onAccessoryFileSize, onTransformReady: (fn) => {
-                                        slotTransformApply.current[slotIdx] = fn;
-                                    }, onPress: getOnPress(mapping.assetId), onLoaded: slotIdx === mountedSlots - 1 && !budgetExhausted ? onAccessoryLoaded : undefined, ...(newAccessorySlots.current.has(slotIdx) && {
-                                        autoNormalizeMaxSize: AUTO_NORMALIZE_MAX_SIZE,
-                                        boneWorldPos: boneSnap_1.HUMANOID_BONES[mapping.asset.attach_bone ?? 'Head'] ?? boneSnap_1.HUMANOID_BONES['Head'],
-                                        onAutoNormalized: (relOffset, scale) => {
-                                            const bone = boneSnap_1.HUMANOID_BONES[mapping.asset.attach_bone ?? 'Head'] ?? boneSnap_1.HUMANOID_BONES['Head'];
-                                            positionRefs.current[slotIdx] = [
-                                                bone[0] + relOffset[0],
-                                                bone[1] + relOffset[1],
-                                                bone[2] + relOffset[2],
-                                            ];
-                                            scaleRefs.current[slotIdx] = [scale, scale, scale];
-                                            newAccessorySlots.current.delete(slotIdx);
-                                            onPlacementChange(mapping.assetId, {
-                                                bone: mapping.asset.attach_bone ?? 'Head',
-                                                position: [relOffset[0], relOffset[1], relOffset[2]],
-                                                rotation: [0, 0, 0],
-                                                scale,
-                                            });
-                                        },
-                                    }) }, mapping.assetId));
-                            })] }) }) }), (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [styles.overlay, overlayAnimatedStyle], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.overlayTop, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.assetNameBadge, selectionBadgeStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.assetNameText, numberOfLines: 1, children: activeAssetName }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.overlayActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayButton, onPress: resetToAttachBone, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "locate-outline", size: 20, color: COLORS.textPrimary }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayButton, onPress: () => {
-                                            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-                                            setShowPrecision((prev) => !prev);
-                                        }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "settings-outline", size: 20, color: showPrecision ? COLORS.accent : COLORS.textPrimary }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [styles.overlayButton, styles.doneButton], onPress: () => {
-                                            // Ensure pendingCommit is populated from current refs
-                                            // (may not have been set if user only used PrecisionPanel, not gestures)
-                                            if (activeAssetId) {
-                                                const slotIdx = assetIdToSlot[activeAssetId];
-                                                if (slotIdx !== undefined) {
-                                                    pendingCommit.current = {
-                                                        assetId: activeAssetId,
-                                                        slotIdx,
-                                                        pos: positionRefs.current[slotIdx],
-                                                        rot: rotationRefs.current[slotIdx],
-                                                        scl: scaleRefs.current[slotIdx],
-                                                    };
-                                                }
-                                            }
-                                            commitActiveTransform();
-                                            deselectAccessory();
-                                            onDone();
-                                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.doneText, children: "Done" }) })] })] }), activeAssetId ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayTapZone, onPress: deselectAccessory })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.overlayTapZone, pointerEvents: "none" }))] }), showPrecision && activeAssetId && (0, jsx_runtime_1.jsx)(PrecisionPanel_1.default, {})] }));
-}
-exports.default = FilamentEditor;
-// ---------------------------------------------------------------------------
-// Styles
-// ---------------------------------------------------------------------------
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    sceneContainer: {
-        flex: 1,
-    },
-    filamentView: {
-        flex: 1,
-        backgroundColor: COLORS.bg,
-    },
-    overlay: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        justifyContent: 'space-between',
-    },
-    overlayTop: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingTop: 12,
-    },
-    assetNameBadge: {
-        backgroundColor: COLORS.card,
-        borderRadius: 8,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderWidth: 1,
-        borderColor: COLORS.border,
-        maxWidth: 160,
-    },
-    assetNameText: {
-        color: COLORS.textPrimary,
-        fontSize: 13,
-        fontWeight: '600',
-    },
-    overlayActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    overlayButton: {
-        backgroundColor: COLORS.card,
-        borderRadius: 8,
-        padding: 8,
-        borderWidth: 1,
-        borderColor: COLORS.border,
-    },
-    doneButton: {
-        backgroundColor: COLORS.accent,
-        borderColor: COLORS.accent,
-        paddingHorizontal: 16,
-    },
-    doneText: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '700',
-    },
-    overlayTapZone: {
-        flex: 1,
-    },
-});