aniview 1.0.0 → 1.1.0

package/dist/Aniview.js

@@ -1,172 +1,9 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle, interpolate, interpolateColor, Extrapolation, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import { useAniview } from './useAniview';
-/**
- * HELPER: Strips mapping styles and provides transform array for reconstruction.
- */
-function stripLayoutProps(style) {
-    const flattened = StyleSheet.flatten(style) || {};
-    const { transform, position, left, top, right, bottom, marginLeft, marginTop, marginRight, marginBottom, ...rest } = flattened;
-    return { rest, transform: Array.isArray(transform) ? transform : [] };
-}
-/**
- * HELPER: Flattens transform array into O(1) property map for interpolation.
- */
-function flattenTransform(transform) {
-    const props = {};
-    transform.forEach(t => {
-        const key = Object.keys(t)[0];
-        let val = t[key];
-        // Handle rotation strings
-        if (typeof val === 'string' && val.endsWith('deg'))
-            val = parseFloat(val);
-        props[`_tr_${key}`] = val;
-    });
-    return props;
-}
-/**
- * HELPER: Normalizes any color string to RGBA for consistent interpolation.
- */
-function normalizeColorToRgba(c) {
-    if (!c || c === 'transparent')
-        return 'rgba(0,0,0,0)';
-    if (c.startsWith('#')) {
-        const hex = c.slice(1);
-        let r = 0, g = 0, b = 0, a = 1;
-        if (hex.length === 3) {
-            r = parseInt(hex[0] + hex[0], 16);
-            g = parseInt(hex[1] + hex[1], 16);
-            b = parseInt(hex[2] + hex[2], 16);
-        }
-        else {
-            r = parseInt(hex.slice(0, 2), 16);
-            g = parseInt(hex.slice(2, 4), 16);
-            b = parseInt(hex.slice(4, 6), 16);
-            if (hex.length === 8)
-                a = parseInt(hex.slice(6, 8), 16) / 255;
-        }
-        return `rgba(${r},${g},${b},${a})`;
-    }
-    const match = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-    if (match)
-        return `rgba(${match[1]},${match[2]},${match[3]},${match[4] || 1})`;
-    const hMatch = c.match(/hsla?\((\d+),\s*([\d.]+)%?,\s*([\d.]+)%?(?:,\s*([\d.]+))?\)/);
-    if (hMatch) {
-        const h = parseInt(hMatch[1]), s = parseFloat(hMatch[2]) / 100, l = parseFloat(hMatch[3]) / 100, a = hMatch[4] ? parseFloat(hMatch[4]) : 1;
-        const k = (n) => (n + h / 30) % 12;
-        const arc = s * Math.min(l, 1 - l);
-        const f = (n) => l - arc * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-        return `rgba(${Math.round(255 * f(0))},${Math.round(255 * f(8))},${Math.round(255 * f(4))},${a})`;
-    }
-    return 'rgba(0,0,0,0)';
-}
-/**
- * PURE JS COLOR INTERPOLATOR
- */
-function jsInterpolateColor(val, start, end, startColor, endColor) {
-    'worklet';
-    if (!startColor || !endColor || startColor === endColor)
-        return startColor || 'rgba(0,0,0,0)';
-    const range = (end - start) || 1;
-    const progress = Math.max(0, Math.min(1, (val - start) / range));
-    const parse = (c) => {
-        if (!c || c === 'transparent')
-            return [0, 0, 0, 0];
-        if (c.startsWith('#')) {
-            const hex = c.slice(1);
-            if (hex.length === 3)
-                return [parseInt(hex[0] + hex[0], 16), parseInt(hex[1] + hex[1], 16), parseInt(hex[2] + hex[2], 16), 1];
-            return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16), hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1];
-        }
-        const match = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-        if (match)
-            return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), match[4] ? parseFloat(match[4]) : 1];
-        const hMatch = c.match(/hsla?\((\d+),\s*([\d.]+)%?,\s*([\d.]+)%?(?:,\s*([\d.]+))?\)/);
-        if (hMatch) {
-            const h = parseInt(hMatch[1]), s = parseFloat(hMatch[2]) / 100, l = parseFloat(hMatch[3]) / 100, a = hMatch[4] ? parseFloat(hMatch[4]) : 1;
-            const k = (n) => (n + h / 30) % 12;
-            const arc = s * Math.min(l, 1 - l);
-            const f = (n) => l - arc * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-            return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4)), a];
-        }
-        return [0, 0, 0, 0];
-    };
-    const s = parse(startColor), e = parse(endColor);
-    const r = Math.round(s[0] + (e[0] - s[0]) * progress);
-    const g = Math.round(s[1] + (e[1] - s[1]) * progress);
-    const b = Math.round(s[2] + (e[2] - s[2]) * progress);
-    const a = s[3] + (e[3] - s[3]) * progress;
-    return `rgba(${r},${g},${b},${a})`;
-}
-/**
- * SMART INTERPOLATE COLOR
- * Handles "transparent" interpolation by adopting the RGB of the non-transparent color
- * to avoid darkening/graying artifacts.
- */
-function smartInterpolateColor(val, input, output) {
-    'worklet';
-    if (output.length === 0)
-        return 'rgba(0,0,0,0)';
-    if (output.length === 1)
-        return output[0];
-    // Bounds check
-    if (val <= input[0])
-        return output[0];
-    if (val >= input[input.length - 1])
-        return output[output.length - 1];
-    // Find segment
-    let i = 0;
-    // Iterate to find the correct segment
-    while (i < input.length - 2 && val >= input[i + 1]) {
-        i++;
-    }
-    // Safety check
-    if (input[i + 1] === undefined)
-        return output[output.length - 1];
-    const c1 = output[i];
-    const c2 = output[i + 1];
-    let useC1 = c1;
-    let useC2 = c2;
-    const fix = (transp, source) => {
-        'worklet';
-        // We target normalized 'rgba(0,0,0,0)'
-        if (transp !== 'rgba(0,0,0,0)')
-            return transp;
-        if (!source || !source.startsWith('rgba'))
-            return transp;
-        const lastComma = source.lastIndexOf(',');
-        if (lastComma === -1)
-            return transp;
-        // Construct: source RGB + alpha 0
-        return source.substring(0, lastComma + 1) + '0)';
-    };
-    useC1 = fix(c1, c2);
-    useC2 = fix(c2, c1);
-    return interpolateColor(val, [input[i], input[i + 1]], [useC1, useC2]);
-}
-/**
- * OPTIMIZATION: One-time Segment Data Search
- * Finds the segment index and progress percentage once per frame so we
- * don't have to perform a search for every single style property.
- */
-function getSegmentInfo(val, input) {
-    'worklet';
-    const len = input.length;
-    if (len === 0)
-        return { i: 0, p: 0, constant: true };
-    if (len === 1 || val <= input[0])
-        return { i: 0, p: 0, constant: true };
-    if (val >= input[len - 1])
-        return { i: len - 1, p: 0, constant: true };
-    let i = 0;
-    while (i < len - 1 && val >= input[i + 1]) {
-        i++;
-    }
-    const gap = input[i + 1] - input[i];
-    const p = gap > 0.001 ? (val - input[i]) / gap : 0;
-    return { i, p, constant: false };
-}
+import { bakeKeyframes } from './core/AniviewBake';
+import { computeAnimatedStyle } from './core/AniviewStyle';
 /**
  * **Aniview** — Absolute World Coordinate Animation Engine Component
  *
@@ -207,6 +44,7 @@ function getSegmentInfo(val, input) {
  * @param props.persistent - If `true`, stays mounted even when far offscreen. Required for WebGL/Three.js canvases. Default: `false`
  * @param props.style - Base styles applied when at home position. Numeric and color props here become the interpolation baseline.
  * @param props.pointerEvents - Standard RN pointer events. Useful for overlay pages that shouldn't block touches.
+ * @returns Animated view that interpolates styles from spatial and event lanes.
  *
  * @example
  * ```tsx
@@ -232,19 +70,24 @@ export default function Aniview(props) {
     const { events, config, dimensions, isMoving } = context;
     const persistent = props.persistent ?? false;
     const [shouldRender, setShouldRender] = useState(true);
-    // Pre-calculate target X on the JS thread to avoid UI thread crash (calling class methods)
-    const homeX = useMemo(() => {
-        if (!config || !dimensions.width)
-            return 0;
+    // Pre-calculate home page offset on the JS thread to avoid UI thread class calls.
+    const homeOffset = useMemo(() => {
+        if (!config || !dimensions.width || !dimensions.height)
+            return { x: 0, y: 0 };
         const homeId = config.resolvePageId(pageId);
-        return config.getPageOffset(homeId, dimensions).x;
+        return config.getPageOffset(homeId, dimensions);
     }, [config, pageId, dimensions.width, dimensions.height]);
+    const homeX = homeOffset.x;
+    const homeY = homeOffset.y;
     // SELECTIVE UNMOUNTING: If not persistent, monitor visibility natively.
     useAnimatedReaction(() => {
         if (persistent || !isMoving || isMoving.value)
             return null;
         const cameraX = events.x.value;
-        const isFar = Math.abs(cameraX - homeX) > dimensions.width * 1.5;
+        const cameraY = events.y.value;
+        const isFarX = Math.abs(cameraX - homeX) > dimensions.width * 1.5;
+        const isFarY = Math.abs(cameraY - homeY) > dimensions.height * 1.5;
+        const isFar = isFarX || isFarY;
         return isFar;
     }, (isFar) => {
         if (isFar === null)
@@ -253,7 +96,7 @@ export default function Aniview(props) {
             runOnJS(setShouldRender)(false);
         if (!isFar && !shouldRender)
             runOnJS(setShouldRender)(true);
-    }, [persistent, dimensions.width, homeX, shouldRender, isMoving]);
+    }, [persistent, dimensions.width, dimensions.height, homeX, homeY, shouldRender, isMoving]);
     const hasNoDims = dimensions.width <= 0 || dimensions.height <= 0;
     const cached = useMemo(() => config?.getLayout(pageId.toString()), [config, pageId]);
     const [localLayout, setLocalLayout] = useState(cached || null);
@@ -271,6 +114,12 @@ export default function Aniview(props) {
             setLocalLayout({ x, y });
         }
     }, [style, localLayout]);
+    /**
+     * Captures local layout origin for world composition and cache hydration.
+     *
+     * @param e - Native layout event from the root animated view.
+     * @returns void
+     */
     const onLayout = useCallback((e) => {
         let { x, y, width, height } = e.nativeEvent.layout;
         const flattened = StyleSheet.flatten(props.style || {});
@@ -292,264 +141,7 @@ export default function Aniview(props) {
     const baked = useMemo(() => {
         if (!localLayout || !config)
             return null;
-        const isColorProp = (k) => k.toLowerCase().includes('color') || k === 'tintColor';
-        try {
-            const bakeInfo = config.register(pageId, dimensions, frames, localLayout);
-            const { homeOffset } = bakeInfo;
-            const homeX = homeOffset.x + localLayout.x;
-            const homeY = homeOffset.y + localLayout.y;
-            const baseOpacity = baseStyle.opacity ?? 1;
-            // 1. Initial State Extraction
-            const homeProps = { worldX: homeX, worldY: homeY, opacity: baseOpacity };
-            const flatBase = StyleSheet.flatten(style) || {};
-            for (const k in flatBase) {
-                const v = flatBase[k];
-                if (typeof v === 'number' || (typeof v === 'string' && isColorProp(k))) {
-                    homeProps[k] = (typeof v === 'string' && isColorProp(k)) ? normalizeColorToRgba(v) : v;
-                }
-                else if (k === 'transform' && Array.isArray(v)) {
-                    Object.assign(homeProps, flattenTransform(v));
-                }
-                else if (k === 'shadowOffset' || k === 'textShadowOffset') {
-                    homeProps[k + 'Width'] = v?.width ?? 0;
-                    homeProps[k + 'Height'] = v?.height ?? 0;
-                }
-            }
-            // 2. Pre-scan all frames to find ALL active keys and update homeProps
-            if (frames) {
-                const registration = bakeInfo;
-                const scanFrame = (frame) => {
-                    if (frame.style) {
-                        const fStyles = Array.isArray(frame.style) ? frame.style : [frame.style];
-                        fStyles.forEach((s) => {
-                            const fFlat = StyleSheet.flatten(s) || {};
-                            for (const k in fFlat) {
-                                const v = fFlat[k];
-                                let key = k;
-                                if (k === 'transform' && Array.isArray(v)) {
-                                    const flatTr = flattenTransform(v);
-                                    Object.keys(flatTr).forEach(tk => {
-                                        if (homeProps[tk] === undefined) {
-                                            homeProps[tk] = tk.includes('scale') ? 1 : 0;
-                                        }
-                                    });
-                                }
-                                else if (k === 'shadowOffset' || k === 'textShadowOffset') {
-                                    if (homeProps[k + 'Width'] === undefined) {
-                                        homeProps[k + 'Width'] = 0;
-                                        homeProps[k + 'Height'] = 0;
-                                    }
-                                }
-                                else if (homeProps[k] === undefined && (typeof v === 'number' || (typeof v === 'string' && isColorProp(k)))) {
-                                    homeProps[k] = (k === 'opacity' || k.includes('scale')) ? 1 : (isColorProp(k) ? 'rgba(0,0,0,0)' : 0);
-                                }
-                            }
-                        });
-                    }
-                    if (frame.opacity !== undefined && homeProps.opacity === undefined)
-                        homeProps.opacity = 1;
-                    if (frame.scale !== undefined && homeProps._tr_scale === undefined)
-                        homeProps._tr_scale = 1;
-                    if (frame.rotate !== undefined && homeProps._tr_rotate === undefined)
-                        homeProps._tr_rotate = 0;
-                };
-                for (const frameKey in registration.bakedFrames) {
-                    scanFrame(registration.bakedFrames[frameKey]);
-                }
-                for (const laneKey in registration.eventLanes) {
-                    registration.eventLanes[laneKey].forEach(scanFrame);
-                }
-            }
-            // 3. Spatial Grid Construction (2D)
-            const grid = { [`${homeOffset.x}_${homeOffset.y}`]: homeProps };
-            const uniqueX = new Set([homeOffset.x]);
-            const uniqueY = new Set([homeOffset.y]);
-            const activeKeys = new Set();
-            // 4. Event Lane Construction (1D)
-            const eventLanes = {};
-            if (frames) {
-                const registration = bakeInfo;
-                // Process Spatial Frames
-                for (const frameKey in registration.bakedFrames) {
-                    const frame = registration.bakedFrames[frameKey];
-                    const targetX = frame.worldX + homeOffset.x;
-                    const targetY = frame.worldY + homeOffset.y;
-                    uniqueX.add(targetX);
-                    uniqueY.add(targetY);
-                    // Start with a full copy of COMPLETE homeProps
-                    const frameProps = { ...homeProps, worldX: targetX + localLayout.x, worldY: targetY + localLayout.y };
-                    if (frame.style) {
-                        const fStyles = Array.isArray(frame.style) ? frame.style : [frame.style];
-                        fStyles.forEach(s => {
-                            const fFlat = StyleSheet.flatten(s) || {};
-                            for (const k in fFlat) {
-                                const v = fFlat[k];
-                                if (k === 'transform' && Array.isArray(v)) {
-                                    Object.assign(frameProps, flattenTransform(v));
-                                }
-                                else if (k === 'shadowOffset' || k === 'textShadowOffset') {
-                                    frameProps[k + 'Width'] = v?.width ?? 0;
-                                    frameProps[k + 'Height'] = v?.height ?? 0;
-                                }
-                                else if (typeof v === 'number' || (typeof v === 'string' && isColorProp(k))) {
-                                    let finalV = v;
-                                    if (typeof v === 'string' && isColorProp(k))
-                                        finalV = normalizeColorToRgba(v);
-                                    if (k === 'left' || k === 'marginLeft')
-                                        frameProps.worldX = targetX + Number(v) + (dimensions.offsetX || 0);
-                                    else if (k === 'top' || k === 'marginTop')
-                                        frameProps.worldY = targetY + Number(v) + (dimensions.offsetY || 0);
-                                    else
-                                        frameProps[k] = finalV;
-                                    // If this is a NEW key not in homeProps, add it to homeProps with a default
-                                    if (homeProps[k] === undefined) {
-                                        homeProps[k] = (k === 'opacity' || k.includes('scale')) ? 1 : (isColorProp(k) ? 'rgba(0,0,0,0)' : 0);
-                                    }
-                                }
-                            }
-                        });
-                    }
-                    // Add shortcuts
-                    if (frame.opacity !== undefined)
-                        frameProps.opacity = frame.opacity;
-                    if (frame.scale !== undefined)
-                        frameProps._tr_scale = frame.scale;
-                    if (frame.rotate !== undefined)
-                        frameProps._tr_rotate = frame.rotate;
-                    for (const p in frameProps) {
-                        if (frameProps[p] !== homeProps[p])
-                            activeKeys.add(p);
-                    }
-                    grid[`${targetX}_${targetY}`] = frameProps;
-                }
-                // Process Event Lanes
-                for (const eventName in registration.eventLanes) {
-                    const framesInLane = registration.eventLanes[eventName];
-                    const inputValues = framesInLane.map(f => f.value || 0);
-                    const keysInLane = new Set();
-                    framesInLane.forEach(f => {
-                        const fStyles = Array.isArray(f.style) ? f.style : (f.style ? [f.style] : []);
-                        fStyles.forEach(s => {
-                            const flat = StyleSheet.flatten(s) || {};
-                            Object.keys(flat).forEach(k => {
-                                if (k === 'transform') {
-                                    const tr = flattenTransform(flat.transform);
-                                    Object.keys(tr).forEach(tk => keysInLane.add(tk));
-                                }
-                                else {
-                                    keysInLane.add(k);
-                                }
-                            });
-                        });
-                        if (f.opacity !== undefined)
-                            keysInLane.add('opacity');
-                        if (f.scale !== undefined)
-                            keysInLane.add('_tr_scale');
-                        if (f.rotate !== undefined)
-                            keysInLane.add('_tr_rotate');
-                    });
-                    const keysArr = Array.from(keysInLane);
-                    const outputRanges = keysArr.map(k => {
-                        return framesInLane.map(f => {
-                            const fStyles = Array.isArray(f.style) ? f.style : (f.style ? [f.style] : []);
-                            let val = homeProps[k];
-                            fStyles.forEach(s => {
-                                const flat = StyleSheet.flatten(s) || {};
-                                if (k.startsWith('_tr_')) {
-                                    const tr = flattenTransform(flat.transform || []);
-                                    if (tr[k] !== undefined)
-                                        val = tr[k];
-                                }
-                                else {
-                                    if (flat[k] !== undefined)
-                                        val = flat[k];
-                                }
-                            });
-                            if (k === 'opacity' && f.opacity !== undefined)
-                                val = f.opacity;
-                            if (k === '_tr_scale' && f.scale !== undefined)
-                                val = f.scale;
-                            if (k === '_tr_rotate' && f.rotate !== undefined)
-                                val = f.rotate;
-                            return val;
-                        });
-                    });
-                    const isPersistent = framesInLane.some(f => f.persistent === true);
-                    eventLanes[eventName] = { values: inputValues, outputRanges, keys: keysArr, persistent: isPersistent };
-                    keysArr.forEach(k => activeKeys.add(k));
-                }
-            }
-            const sortedX = Array.from(uniqueX).sort((a, b) => a - b);
-            const sortedY = Array.from(uniqueY).sort((a, b) => a - b);
-            const numericKeys = ['worldX', 'worldY', 'opacity'];
-            const colorKeys = [];
-            Array.from(activeKeys).forEach(k => {
-                if (k === 'worldX' || k === 'worldY' || k === 'opacity')
-                    return;
-                if (isColorProp(k))
-                    colorKeys.push(k);
-                else
-                    numericKeys.push(k);
-            });
-            const finalize = (tAxis, fAxis, isH, keys, isColor) => {
-                return fAxis.map(fVal => {
-                    const values = [];
-                    const constFlags = [];
-                    keys.forEach(k => {
-                        const outputs = [];
-                        let isConst = true;
-                        const anchors = tAxis.filter(t => grid[isH ? `${t}_${fVal}` : `${fVal}_${t}`]).map(t => ({ t, v: grid[isH ? `${t}_${fVal}` : `${fVal}_${t}`][k] ?? homeProps[k] }));
-                        tAxis.forEach((t, i) => {
-                            let calc = homeProps[k];
-                            if (anchors.length > 0) {
-                                let l = anchors[0], r = anchors[anchors.length - 1];
-                                for (let j = 0; j < anchors.length - 1; j++)
-                                    if (t >= anchors[j].t && t <= anchors[j + 1].t) {
-                                        l = anchors[j];
-                                        r = anchors[j + 1];
-                                        break;
-                                    }
-                                if (t <= l.t)
-                                    calc = l.v;
-                                else if (t >= r.t)
-                                    calc = r.v;
-                                else {
-                                    if (isColor)
-                                        calc = jsInterpolateColor(t, l.t, r.t, l.v, r.v);
-                                    else
-                                        calc = l.v + ((t - l.t) / ((r.t - l.t) || 1)) * (r.v - l.v);
-                                }
-                            }
-                            outputs.push(calc);
-                            if (i > 0 && calc !== outputs[0])
-                                isConst = false;
-                        });
-                        values.push(outputs);
-                        constFlags.push(isConst);
-                    });
-                    return { fixed: fVal, values, constFlags };
-                });
-            };
-            if (pageId === 'ROOM' && frames) {
-                // Keep minimal or no logging here
-            }
-            return {
-                homeX: homeOffset.x, homeY: homeOffset.y, localX: localLayout.x, localY: localLayout.y,
-                bakedH: finalize(sortedX, sortedY, true, numericKeys, false),
-                bakedV: finalize(sortedY, sortedX, false, numericKeys, false),
-                bakedCH: finalize(sortedX, sortedY, true, colorKeys, true),
-                bakedCV: finalize(sortedY, sortedX, false, colorKeys, true),
-                eventLanes,
-                uniqueX: sortedX, uniqueY: sortedY,
-                numericKeys, colorKeys,
-                baseProps: stripLayoutProps(baseStyle),
-                homeProps
-            };
-        }
-        catch (e) {
-            console.error('[Aniview] Bake Failed', e);
-            return null;
-        }
+        return bakeKeyframes(localLayout, config, pageId, dimensions, frames, baseStyle, style);
     }, [localLayout, config, pageId, frames, style, baseStyle, dimensions.offsetX, dimensions.offsetY, dimensions.width, dimensions.height]);
     const cameraX_SV = events?.x;
     const cameraY_SV = events?.y;
@@ -557,257 +149,7 @@ export default function Aniview(props) {
     const animatedStyle = useAnimatedStyle(() => {
         if (!baked || !cameraX_SV || !cameraY_SV || !config)
             return { opacity: 0 };
-        const cameraX = cameraX_SV.value, cameraY = cameraY_SV.value;
-        // NATIVE VIRTUALIZATION CHECK (Spatial)
-        // We hide components that are more than 1.5 screen-widths away from the camera.
-        // This is 100% UI-thread safe and replaces the problematic JS Set check.
-        const thresholdX = dimensions.width * 1.5;
-        const thresholdY = dimensions.height * 1.5;
-        const distX = Math.abs(cameraX - baked.homeX);
-        const distY = Math.abs(cameraY - baked.homeY);
-        let isVisibleX = distX <= thresholdX;
-        if (!isVisibleX) {
-            for (let i = 0; i < baked.uniqueX.length; i++) {
-                if (Math.abs(cameraX - baked.uniqueX[i]) < thresholdX) {
-                    isVisibleX = true;
-                    break;
-                }
-            }
-        }
-        let isVisibleY = distY <= thresholdY;
-        if (!isVisibleY) {
-            for (let i = 0; i < baked.uniqueY.length; i++) {
-                if (Math.abs(cameraY - baked.uniqueY[i]) < thresholdY) {
-                    isVisibleY = true;
-                    break;
-                }
-            }
-        }
-        if (!isVisibleX || !isVisibleY)
-            return { opacity: 0 };
-        // Safety: If dimensions are 0 (startup), skip calculation
-        if (dimensions.width <= 0 || dimensions.height <= 0 || isNaN(dimensions.width) || isNaN(dimensions.height)) {
-            return { opacity: 0 };
-        }
-        const windowX = dimensions.width * 0.4;
-        const windowY = dimensions.height * 0.4;
-        let pX = 1 - Math.min(1, Math.max(0, Math.abs(cameraX - baked.homeX) / windowX));
-        let pY = isSingleRowVal ? 1 : (1 - Math.min(1, Math.max(0, Math.abs(cameraY - baked.homeY) / windowY)));
-        // Sharpen the curve so events are exclusive and don't 'leak' visual offsets.
-        if (!pX || isNaN(pX))
-            pX = 0;
-        if (!pY || isNaN(pY))
-            pY = 0;
-        // Softened power-2 curve for smoother transitions and better responsiveness
-        const presenceX = Math.pow(pX, 2);
-        const presenceY = isSingleRowVal ? 1 : Math.pow(pY, 2);
-        const presence = presenceX * presenceY;
-        const getLaneInfo = (lanes, pos) => {
-            if (!lanes || lanes.length === 0)
-                return null;
-            let i = 0;
-            while (i < lanes.length - 1 && pos > lanes[i].fixed)
-                i++;
-            const l1idx = Math.max(0, i - 1), l2idx = i;
-            const l1 = lanes[l1idx], l2 = lanes[l2idx];
-            if (!l1 || !l2)
-                return null;
-            const gap = l2.fixed - l1.fixed;
-            const mix = Math.max(0, Math.min(1, gap > 0.1 ? (pos - l1.fixed) / gap : 0));
-            return { l1: { ...l1, idx: l1idx }, l2: { ...l2, idx: l2idx }, mix, dist: Math.min(Math.abs(pos - l1.fixed), Math.abs(pos - l2.fixed)) };
-        };
-        const laneH = getLaneInfo(baked.bakedH, cameraY), laneV = getLaneInfo(baked.bakedV, cameraX);
-        if (!laneH || !laneV)
-            return { opacity: 0 };
-        const viewportSize = dimensions.width;
-        const isNearH = laneH.dist < viewportSize, isNearV = laneV.dist < viewportSize;
-        if (!isNearH && !isNearV)
-            return { opacity: 0 };
-        const props = {
-            ...baked.baseProps.rest,
-            position: 'absolute',
-            width: baked.baseProps.rest.width ?? dimensions.width,
-            height: baked.baseProps.rest.height ?? dimensions.height,
-        };
-        // If user provided left/top in style, we should probably ignore them in the final composite 
-        // because they are already in localLayout and baked.localX/Y.
-        props.left = 0;
-        props.top = 0;
-        const hWeight = isNearV ? (isNearH ? laneV.dist / (laneH.dist + laneV.dist + 0.001) : 0) : 1;
-        // ONE-TIME OPTIMIZATION: Search for segment indices ONCE per frame
-        const segX = getSegmentInfo(cameraX, baked.uniqueX);
-        const segY = getSegmentInfo(cameraY, baked.uniqueY);
-        let finalX = 0, finalY = 0, finalOp = 1;
-        const spatialVals = { ...baked.homeProps };
-        const runSpatial = (keys, baked_H, baked_V, isColor) => {
-            const laneH_L = baked_H[laneH.l1.idx || 0], laneH_R = baked_H[laneH.l2.idx || 0];
-            const laneV_L = baked_V[laneV.l1.idx || 0], laneV_R = baked_V[laneV.l2.idx || 0];
-            keys.forEach((k, i) => {
-                let vH = baked.homeProps[k], vV = baked.homeProps[k];
-                if (isNearH && laneH_L && laneH_R) {
-                    const o1 = laneH_L.values[i], o2 = laneH_R.values[i];
-                    if (o1 && o2) {
-                        const r1 = (laneH_L.constFlags[i] || segX.constant) ? o1[segX.i] : (isColor ? smartInterpolateColor(cameraX, baked.uniqueX, o1) : o1[segX.i] + segX.p * (o1[segX.i + 1] - o1[segX.i]));
-                        const r2 = (laneH_R.constFlags[i] || segX.constant) ? o2[segX.i] : (isColor ? smartInterpolateColor(cameraX, baked.uniqueX, o2) : o2[segX.i] + segX.p * (o2[segX.i + 1] - o2[segX.i]));
-                        vH = isColor ? smartInterpolateColor(laneH.mix, [0, 1], [r1, r2]) : r1 + laneH.mix * (r2 - r1);
-                    }
-                }
-                if (isNearV && laneV_L && laneV_R) {
-                    const o1 = laneV_L.values[i], o2 = laneV_R.values[i];
-                    if (o1 && o2) {
-                        const r1 = (laneV_L.constFlags[i] || segY.constant) ? o1[segY.i] : (isColor ? smartInterpolateColor(cameraY, baked.uniqueY, o1) : o1[segY.i] + segY.p * (o1[segY.i + 1] - o1[segY.i]));
-                        const r2 = (laneV_R.constFlags[i] || segY.constant) ? o2[segY.i] : (isColor ? smartInterpolateColor(cameraY, baked.uniqueY, o2) : o2[segY.i] + segY.p * (o2[segY.i + 1] - o2[segY.i]));
-                        vV = isColor ? smartInterpolateColor(laneV.mix, [0, 1], [r1, r2]) : r1 + laneV.mix * (r2 - r1);
-                    }
-                }
-                if (!isColor) {
-                    if (typeof vH !== 'number' || isNaN(vH))
-                        vH = baked.homeProps[k] || 0;
-                    if (typeof vV !== 'number' || isNaN(vV))
-                        vV = baked.homeProps[k] || 0;
-                }
-                spatialVals[k] = (isNearH && isNearV) ? (isColor ? smartInterpolateColor(hWeight, [0, 1], [vV, vH]) : vH * hWeight + vV * (1 - hWeight)) : (isNearH ? vH : vV);
-            });
-        };
-        runSpatial(baked.numericKeys, baked.bakedH, baked.bakedV, false);
-        if (baked.colorKeys.length > 0)
-            runSpatial(baked.colorKeys, baked.bakedCH, baked.bakedCV, true);
-        // 2. Event Phase
-        const eventResults = {};
-        const eventColorResults = {};
-        Object.entries(baked.eventLanes).forEach(([eName, lane]) => {
-            const driver = events[eName];
-            if (!driver)
-                return;
-            const val = driver.value;
-            const laneLen = lane.values.length;
-            const laneWeight = lane.persistent ? 1 : presence; // presence is ~1 on home page
-            // Debug Log
-            if (eName === 'pullDown') {
-                // console.log(`[Aniview Worklet] pullDown val: ${val} (Presence: ${presence.toFixed(2)})`);
-            }
-            lane.keys.forEach((k, i) => {
-                const isColor = baked.colorKeys.includes(k);
-                if (isColor) {
-                    const range = lane.outputRanges[i];
-                    let result;
-                    // Safety: interpolateColor needs at least 2 points
-                    if (laneLen < 2) {
-                        result = range[0];
-                    }
-                    else {
-                        result = interpolateColor(val, lane.values, range);
-                    }
-                    // Modulate color towards homeProps[k]
-                    if (laneWeight < 0.99) {
-                        eventColorResults[k] = smartInterpolateColor(laneWeight, [0, 1], [baked.homeProps[k], result]);
-                    }
-                    else {
-                        eventColorResults[k] = result;
-                    }
-                }
-                else {
-                    const range = lane.outputRanges[i];
-                    let result = baked.homeProps[k] ?? 0;
-                    if (laneLen === 1) {
-                        const v1 = lane.values[0];
-                        if (Math.abs(v1) > 0.001) {
-                            result = interpolate(val, [0, v1], [baked.homeProps[k] ?? 0, range[0]], Extrapolation.CLAMP);
-                        }
-                        else {
-                            result = val > 0 ? range[0] : (baked.homeProps[k] ?? 0);
-                        }
-                    }
-                    else if (laneLen >= 2) {
-                        let hasDuplicate = false;
-                        for (let j = 0; j < laneLen - 1; j++)
-                            if (Math.abs(lane.values[j + 1] - lane.values[j]) < 0.0001)
-                                hasDuplicate = true;
-                        if (!hasDuplicate) {
-                            result = interpolate(val, lane.values, range, Extrapolation.CLAMP);
-                        }
-                        else {
-                            result = range[0];
-                        }
-                    }
-                    const diff = (result - (baked.homeProps[k] ?? 0)) * laneWeight;
-                    if (!eventResults[k])
-                        eventResults[k] = (baked.homeProps[k] ?? 0) + diff;
-                    else
-                        eventResults[k] += diff;
-                }
-            });
-        });
-        // 3. Composition Phase
-        const compositeNumeric = (k, base) => {
-            const evVal = eventResults[k];
-            if (evVal === undefined)
-                return base ?? 0;
-            const homeVal = baked.homeProps[k] ?? 0;
-            const evDiff = evVal - homeVal;
-            if (k === 'opacity' || k === '_tr_scale') {
-                return (base ?? 0) * (evVal / (homeVal || 1));
-            }
-            return (base ?? 0) + evDiff;
-        };
-        finalX = compositeNumeric('worldX', spatialVals.worldX ?? 0);
-        finalY = compositeNumeric('worldY', spatialVals.worldY ?? 0);
-        finalOp = Math.max(0, Math.min(1, compositeNumeric('opacity', spatialVals.opacity ?? 1)));
-        const layoutXKeys = ['left', 'marginLeft'];
-        const layoutYKeys = ['top', 'marginTop'];
-        // Build final props
-        const allKeys = new Set([...baked.numericKeys, ...baked.colorKeys]);
-        allKeys.forEach(k => {
-            if (k === 'worldX' || k === 'worldY' || k === 'opacity')
-                return;
-            const spatialVal = spatialVals[k];
-            const isColor = baked.colorKeys.includes(k);
-            let res;
-            if (isColor) {
-                res = eventColorResults[k] ?? spatialVal ?? baked.homeProps[k];
-            }
-            else {
-                res = compositeNumeric(k, spatialVal);
-            }
-            if (!isColor && isNaN(res))
-                res = baked.homeProps[k];
-            // Redirect layout props to final transform to avoid double-dipping results.
-            // This ensures that animating 'marginTop' actually moves the component via translateY.
-            if (!isColor) {
-                if (layoutXKeys.includes(k)) {
-                    finalX += (res - (baked.homeProps[k] ?? 0));
-                    return;
-                }
-                if (layoutYKeys.includes(k)) {
-                    finalY += (res - (baked.homeProps[k] ?? 0));
-                    return;
-                }
-            }
-            if (k.startsWith('_tr_')) {
-                if (!props.transform)
-                    props.transform = [];
-                const tName = k.slice(4);
-                let tVal = res;
-                if (tName === 'rotate' || tName === 'rotateX' || tName === 'rotateY' || tName === 'rotateZ')
-                    tVal = `${res}deg`;
-                props.transform.push({ [tName]: tVal });
-            }
-            else if (k === 'shadowOffsetWidth' ||
-                k === 'shadowOffsetHeight' ||
-                k === 'textShadowOffsetWidth' ||
-                k === 'textShadowOffsetHeight') {
-                const b = k.startsWith('shadowOffset') ? 'shadowOffset' : 'textShadowOffset';
-                props[b] = { ...props[b], [k.endsWith('Width') ? 'width' : 'height']: res };
-            }
-            else
-                props[k] = res;
-        });
-        props.opacity = finalOp;
-        const sx = cameraX || 0, sy = cameraY || 0;
-        const tx = (finalX - sx), ty = (finalY - sy);
-        const baseTransform = baked.baseProps.transform || [];
-        props.transform = [{ translateX: isNaN(tx) ? 0 : tx }, { translateY: isNaN(ty) ? 0 : ty }, ...(props.transform || []), ...baseTransform];
-        return props;
+        return computeAnimatedStyle(baked, cameraX_SV, cameraY_SV, events, config, dimensions, isSingleRowVal);
     }, [baked, dimensions.width, dimensions.height, cameraX_SV, cameraY_SV, events]);
     // Final safety: If no layout yet, show placeholder at opacity 0
     if (!localLayout || hasNoDims) {