aniview 1.0.0

package/dist/Aniview.js

@@ -0,0 +1,831 @@
+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 { 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 };
+}
+/**
+ * **Aniview** — Absolute World Coordinate Animation Engine Component
+ *
+ * The core animated view that interpolates its style properties based on
+ * the camera's position in a virtual 2D world coordinate system. Each
+ * `Aniview` belongs to a specific `pageId` (its "home page") and defines
+ * `frames` — keyframes that describe how the component should look when
+ * the camera is at a different page or when a custom event reaches a
+ * certain value.
+ *
+ * ### How it works (the "Baking" pipeline)
+ *
+ * 1. On mount (or when `frames`/`style`/`dimensions` change), Aniview
+ *    runs a one-time **bake** on the JS thread. This pre-computes a
+ *    lookup grid of style values indexed by world coordinates.
+ * 2. On every frame, `useAnimatedStyle` reads the camera SharedValues
+ *    (`events.x`, `events.y`) and performs O(1) segment lookups +
+ *    linear/color interpolation — no searching, no string parsing.
+ * 3. The baked data also powers **native virtualization**: components
+ *    farther than 1.5× screen width from the camera are hidden via
+ *    `opacity: 0`, keeping the render tree lightweight.
+ *
+ * ### Key design choices
+ *
+ * - **Absolute positioning**: All Aniview children are rendered with
+ *   `position: 'absolute'` and placed via `translateX`/`translateY`
+ *   relative to the camera. This decouples layout from animation.
+ * - **Smart color interpolation**: When transitioning to/from
+ *   `transparent`, the RGB of the non-transparent color is preserved
+ *   to avoid grey flash artifacts.
+ * - **Selective unmounting**: Non-persistent components unmount when
+ *   offscreen (after snapping completes) to reclaim memory. Set
+ *   `persistent={true}` for 3D/GL content that must stay mounted.
+ *
+ * @param props Standard `ViewProps` plus:
+ * @param props.pageId - The page this component belongs to (numeric index or semantic name from `pageMap`)
+ * @param props.frames - Keyframe definitions. Object keys are frame names, values are {@link AniviewFrame}
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * <Aniview
+ *   pageId="HOME"
+ *   style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}
+ *   frames={{
+ *     away: { page: 'SETTINGS', opacity: 0 },
+ *     scrolled: { event: 'scrollY', value: 100, style: { transform: [{ translateY: -50 }] } },
+ *   }}
+ * >
+ *   <HomeContent />
+ * </Aniview>
+ * ```
+ *
+ * @see {@link AniviewProvider} for setting up the coordinate system
+ * @see {@link AniviewConfig} for layout and gesture configuration
+ * @see {@link useAniview} for accessing context from child components
+ */
+export default function Aniview(props) {
+    const { style, children, pageId, frames, ...rest } = props;
+    const context = useAniview(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;
+        const homeId = config.resolvePageId(pageId);
+        return config.getPageOffset(homeId, dimensions).x;
+    }, [config, pageId, dimensions.width, dimensions.height]);
+    // 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;
+        return isFar;
+    }, (isFar) => {
+        if (isFar === null)
+            return null;
+        if (isFar && shouldRender)
+            runOnJS(setShouldRender)(false);
+        if (!isFar && !shouldRender)
+            runOnJS(setShouldRender)(true);
+    }, [persistent, dimensions.width, homeX, 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);
+    useEffect(() => {
+        if (localLayout && !cached) {
+            config?.registerLayout(pageId.toString(), localLayout);
+        }
+    }, [localLayout, cached, config, pageId]);
+    // FIX: Sync localLayout with controlled style changes
+    useEffect(() => {
+        const flat = StyleSheet.flatten(style || {});
+        const x = flat.left ?? flat.marginLeft ?? 0;
+        const y = flat.top ?? flat.marginTop ?? 0;
+        if (!localLayout || Math.abs(localLayout.x - x) > 0.1 || Math.abs(localLayout.y - y) > 0.1) {
+            setLocalLayout({ x, y });
+        }
+    }, [style, localLayout]);
+    const onLayout = useCallback((e) => {
+        let { x, y, width, height } = e.nativeEvent.layout;
+        const flattened = StyleSheet.flatten(props.style || {});
+        if (x === 0 && typeof flattened?.marginLeft === 'number')
+            x = flattened.marginLeft;
+        if (y === 0 && typeof flattened?.marginTop === 'number')
+            y = flattened.marginTop;
+        if (!localLayout || Math.abs(localLayout.x - x) > 1 || Math.abs(localLayout.y - y) > 1) {
+            if (width > 0 || height > 0) {
+                setLocalLayout({ x, y });
+            }
+        }
+    }, [localLayout, props.style]);
+    const baseStyle = useMemo(() => {
+        const flattened = StyleSheet.flatten(style) || {};
+        return { ...flattened, position: 'absolute' };
+    }, [style]);
+    // --- THE BAKE ---
+    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;
+        }
+    }, [localLayout, config, pageId, frames, style, baseStyle, dimensions.offsetX, dimensions.offsetY, dimensions.width, dimensions.height]);
+    const cameraX_SV = events?.x;
+    const cameraY_SV = events?.y;
+    const isSingleRowVal = config.layout?.length === 1;
+    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;
+    }, [baked, dimensions.width, dimensions.height, cameraX_SV, cameraY_SV, events]);
+    // Final safety: If no layout yet, show placeholder at opacity 0
+    if (!localLayout || hasNoDims) {
+        return (<Animated.View onLayout={onLayout} style={[
+                baseStyle,
+                {
+                    opacity: 0,
+                    width: baseStyle.width ?? dimensions.width,
+                    height: baseStyle.height ?? dimensions.height
+                }
+            ]} pointerEvents="none">
+        {children}
+      </Animated.View>);
+    }
+    if (!shouldRender && !persistent)
+        return null;
+    return (<Animated.View style={animatedStyle} {...rest}>
+      {children}
+    </Animated.View>);
+}
+//# sourceMappingURL=Aniview.js.map