remotion 4.0.538 → 4.0.539

package/dist/cjs/AbsoluteFillElement.js

@@ -59,7 +59,7 @@ const hasTailwindClassName = ({ className, classPrefix, type, }) => {
 };
 const AbsoluteFillElementRefForwarding = (props, ref) => {
     const { style, ...other } = props;
-    const actualStyle = (0, react_1.useMemo)(() => {
+    const defaultStyle = (0, react_1.useMemo)(() => {
         // Make TailwindCSS classes get accepted
         return {
             position: 'absolute',
@@ -136,9 +136,14 @@ const AbsoluteFillElementRefForwarding = (props, ref) => {
             })
                 ? undefined
                 : 'column',
+        };
+    }, [other.className]);
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...defaultStyle,
             ...style,
         };
-    }, [other.className, style]);
+    }, [defaultStyle, style]);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
 };
 exports.AbsoluteFillElement = react_1.default.memo((0, react_1.forwardRef)(AbsoluteFillElementRefForwarding));

package/dist/cjs/animated-image/decode-image.js

@@ -45,6 +45,7 @@ const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, init
         };
     };
     const clearCache = (closeToTimeInSec) => {
+        var _a;
         const itemsInCache = cache.filter((c) => c.frame);
         const sortByClosestToCurrentTime = itemsInCache.sort((a, b) => {
             const aDiff = Math.abs(a.timeInSeconds - closeToTimeInSec);
@@ -56,6 +57,7 @@ const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, init
                 continue;
             }
             const item = sortByClosestToCurrentTime[i];
+            (_a = item.frame) === null || _a === void 0 ? void 0 : _a.close();
             item.frame = null;
         }
     };

package/dist/cjs/effects/create-curve-sampler.d.ts

@@ -0,0 +1 @@
+export declare const createCurveSampler: (points: readonly (readonly [number, number])[], interpolation: 'smooth' | 'linear') => ((input: number) => number);

package/dist/cjs/effects/create-curve-sampler.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCurveSampler = void 0;
+// Shared by the Curves renderer and Studio so the graph matches the pixels.
+// Points are validated by the effect: at least two, with increasing inputs.
+const createCurveSampler = (points, interpolation) => {
+    // Parameterize by distance along the graph so a steep segment gets room
+    // to bend, even when its input values are close together.
+    const distances = points
+        .slice(1)
+        .map((point, index) => Math.hypot(point[0] - points[index][0], point[1] - points[index][1]));
+    const tangents = points.map(() => [0, 0]);
+    if (interpolation === 'smooth' && points.length > 2) {
+        for (let axis = 0; axis < 2; axis++) {
+            const slopes = distances.map((distance, index) => (points[index + 1][axis] - points[index][axis]) / distance);
+            const curvatures = new Array(points.length).fill(0);
+            const upper = new Array(points.length).fill(0);
+            // Solve the natural cubic spline for each coordinate.
+            for (let index = 1; index < points.length - 1; index++) {
+                const diagonal = 2 * (distances[index - 1] + distances[index]) -
+                    distances[index - 1] * upper[index - 1];
+                upper[index] = distances[index] / diagonal;
+                curvatures[index] =
+                    (6 * (slopes[index] - slopes[index - 1]) -
+                        distances[index - 1] * curvatures[index - 1]) /
+                        diagonal;
+            }
+            for (let index = points.length - 2; index > 0; index--) {
+                curvatures[index] -= upper[index] * curvatures[index + 1];
+            }
+            for (let index = 0; index < points.length; index++) {
+                tangents[index][axis] =
+                    index === 0
+                        ? slopes[0] - (distances[0] * curvatures[1]) / 6
+                        : slopes[index - 1] +
+                            (distances[index - 1] *
+                                (curvatures[index - 1] + 2 * curvatures[index])) /
+                                6;
+            }
+        }
+        for (let index = 0; index < points.length; index++) {
+            // Keep both Bezier handles within their segment's input range so
+            // the curve never doubles back and every input has one output.
+            const maxTangent = 3 *
+                Math.min(index === 0
+                    ? Infinity
+                    : (points[index][0] - points[index - 1][0]) / distances[index - 1], index === points.length - 1
+                    ? Infinity
+                    : (points[index + 1][0] - points[index][0]) / distances[index]);
+            if (tangents[index][0] > maxTangent) {
+                tangents[index][1] *= maxTangent / tangents[index][0];
+            }
+            tangents[index][0] = Math.max(0, Math.min(maxTangent, tangents[index][0]));
+        }
+    }
+    return (input) => {
+        if (input <= points[0][0])
+            return points[0][1];
+        if (input >= points[points.length - 1][0]) {
+            return points[points.length - 1][1];
+        }
+        const index = points.findIndex((point) => point[0] > input) - 1;
+        const start = points[index];
+        const end = points[index + 1];
+        if (input === start[0])
+            return start[1];
+        if (interpolation === 'linear' || points.length === 2) {
+            return (start[1] +
+                (end[1] - start[1]) * ((input - start[0]) / (end[0] - start[0])));
+        }
+        const handleLength = distances[index] / 3;
+        const firstX = start[0] + handleLength * tangents[index][0];
+        const secondX = end[0] - handleLength * tangents[index + 1][0];
+        let low = 0;
+        let high = 1;
+        // Invert the monotonic Bezier input coordinate before sampling output.
+        for (let iteration = 0; iteration < 32; iteration++) {
+            const candidate = (low + high) / 2;
+            const inverse = 1 - candidate;
+            const x = inverse ** 3 * start[0] +
+                3 * inverse ** 2 * candidate * firstX +
+                3 * inverse * candidate ** 2 * secondX +
+                candidate ** 3 * end[0];
+            if (x < input)
+                low = candidate;
+            else
+                high = candidate;
+        }
+        const progress = (low + high) / 2;
+        const remaining = 1 - progress;
+        const firstY = start[1] + handleLength * tangents[index][1];
+        const secondY = end[1] - handleLength * tangents[index + 1][1];
+        const value = remaining ** 3 * start[1] +
+            3 * remaining ** 2 * progress * firstY +
+            3 * remaining * progress ** 2 * secondY +
+            progress ** 3 * end[1];
+        return Math.max(0, Math.min(1, value));
+    };
+};
+exports.createCurveSampler = createCurveSampler;

package/dist/cjs/effects/effect-source-observer.d.ts

@@ -0,0 +1,13 @@
+import type { EffectDefinitionAndStack } from './effect-types.js';
+import type { EffectChainState } from './run-effect-chain.js';
+type SourceListener = (source: CanvasImageSource | null) => void;
+/** Studio-only inspection. The source is borrowed and must be consumed synchronously. */
+export declare const subscribeToEffectSource: ({ sequenceKey, effectIndex, onSource, }: {
+    readonly sequenceKey: string;
+    readonly effectIndex: number;
+    readonly onSource: SourceListener;
+}) => (() => void);
+export declare const publishEffectSource: (effect: EffectDefinitionAndStack<unknown>, source: CanvasImageSource, chain: EffectChainState) => void;
+export declare const invalidateEffectChainSources: (chain: EffectChainState) => void;
+export declare const useEffectSourceInspection: (effects: EffectDefinitionAndStack<unknown>[], sequenceKey: string | null) => EffectDefinitionAndStack<unknown>[];
+export {};

package/dist/cjs/effects/effect-source-observer.js

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEffectSourceInspection = exports.invalidateEffectChainSources = exports.publishEffectSource = exports.subscribeToEffectSource = void 0;
+const react_1 = __importStar(require("react"));
+const observers = new Map();
+const redrawListeners = new Map();
+const identities = new WeakMap();
+const inspectedChains = new WeakMap();
+const sourceChainOwners = new Map();
+const useIdentityCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.useLayoutEffect;
+/** Studio-only inspection. The source is borrowed and must be consumed synchronously. */
+const subscribeToEffectSource = ({ sequenceKey, effectIndex, onSource, }) => {
+    var _a;
+    let sequence = observers.get(sequenceKey);
+    if (!sequence) {
+        sequence = new Map();
+        observers.set(sequenceKey, sequence);
+    }
+    let listeners = sequence.get(effectIndex);
+    if (!listeners) {
+        listeners = new Set();
+        sequence.set(effectIndex, listeners);
+    }
+    listeners.add(onSource);
+    // Repaint once when the inspector opens, including while playback is paused.
+    (_a = redrawListeners.get(sequenceKey)) === null || _a === void 0 ? void 0 : _a.forEach((redraw) => redraw());
+    return () => {
+        listeners.delete(onSource);
+        if (listeners.size === 0) {
+            sequence.delete(effectIndex);
+        }
+        if (sequence.size === 0) {
+            observers.delete(sequenceKey);
+        }
+    };
+};
+exports.subscribeToEffectSource = subscribeToEffectSource;
+const publishEffectSource = (effect, source, chain) => {
+    var _a;
+    if (observers.size === 0) {
+        return;
+    }
+    const identity = identities.get(effect);
+    if (!identity) {
+        return;
+    }
+    const listeners = (_a = observers
+        .get(identity.sequenceKey)) === null || _a === void 0 ? void 0 : _a.get(identity.effectIndex);
+    if (!listeners || listeners.size === 0) {
+        return;
+    }
+    let inspected = inspectedChains.get(chain);
+    if (!inspected) {
+        inspected = new Map();
+        inspectedChains.set(chain, inspected);
+    }
+    const key = `${identity.sequenceKey}\0${identity.effectIndex}`;
+    inspected.set(key, identity);
+    sourceChainOwners.set(key, chain);
+    listeners.forEach((listener) => {
+        try {
+            listener(source);
+        }
+        catch (_a) {
+            // Optional inspector readback must never interrupt rendering.
+        }
+    });
+};
+exports.publishEffectSource = publishEffectSource;
+const invalidateEffectChainSources = (chain) => {
+    const inspected = inspectedChains.get(chain);
+    inspectedChains.delete(chain);
+    inspected === null || inspected === void 0 ? void 0 : inspected.forEach((identity, key) => {
+        var _a, _b;
+        // A replacement canvas may already have painted before the old canvas's
+        // passive cleanup. Only the current owner can invalidate its histogram.
+        if (sourceChainOwners.get(key) !== chain) {
+            return;
+        }
+        sourceChainOwners.delete(key);
+        (_b = (_a = observers
+            .get(identity.sequenceKey)) === null || _a === void 0 ? void 0 : _a.get(identity.effectIndex)) === null || _b === void 0 ? void 0 : _b.forEach((listener) => {
+            try {
+                listener(null);
+            }
+            catch (_a) {
+                // Optional inspection must not interfere with canvas cleanup.
+            }
+        });
+    });
+};
+exports.invalidateEffectChainSources = invalidateEffectChainSources;
+const useEffectSourceInspection = (effects, sequenceKey) => {
+    const [revision, setRevision] = (0, react_1.useState)(0);
+    (0, react_1.useLayoutEffect)(() => {
+        if (sequenceKey === null) {
+            return;
+        }
+        let listeners = redrawListeners.get(sequenceKey);
+        if (!listeners) {
+            listeners = new Set();
+            redrawListeners.set(sequenceKey, listeners);
+        }
+        const redraw = () => setRevision((previous) => previous + 1);
+        listeners.add(redraw);
+        if (observers.has(sequenceKey)) {
+            redraw();
+        }
+        return () => {
+            var _a;
+            listeners.delete(redraw);
+            if (listeners.size === 0) {
+                redrawListeners.delete(sequenceKey);
+                (_a = observers.get(sequenceKey)) === null || _a === void 0 ? void 0 : _a.forEach((sourceListeners) => {
+                    sourceListeners.forEach((listener) => {
+                        try {
+                            listener(null);
+                        }
+                        catch (_a) {
+                            // An inspector must not interfere with source cleanup.
+                        }
+                    });
+                });
+            }
+        };
+    }, [sequenceKey]);
+    useIdentityCommitEffect(() => {
+        if (sequenceKey === null) {
+            return;
+        }
+        effects.forEach((effect, effectIndex) => {
+            identities.set(effect, { sequenceKey, effectIndex });
+        });
+        return () => {
+            effects.forEach((effect) => identities.delete(effect));
+        };
+    }, [effects, sequenceKey]);
+    // Source components already repaint when their effect array changes.
+    return (0, react_1.useMemo)(() => {
+        return sequenceKey === null || revision === 0 ? effects : effects.slice();
+    }, [effects, revision, sequenceKey]);
+};
+exports.useEffectSourceInspection = useEffectSourceInspection;

package/dist/cjs/effects/run-effect-chain.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.runEffectChain = exports.cleanupEffectChainState = exports.createEffectChainState = void 0;
 const canvas_pool_js_1 = require("./canvas-pool.js");
 const effect_internals_js_1 = require("./effect-internals.js");
+const effect_source_observer_js_1 = require("./effect-source-observer.js");
 const gpu_device_js_1 = require("./gpu-device.js");
 const createEffectChainState = (width, height) => {
     const state = {
@@ -35,6 +36,7 @@ exports.createEffectChainState = createEffectChainState;
 // canvases and contexts. The state must not be used afterwards.
 const cleanupEffectChainState = (state) => {
     state.currentRunId++;
+    (0, effect_source_observer_js_1.invalidateEffectChainSources)(state);
     try {
         for (const entry of state.cleanupRegistry) {
             entry.definition.cleanup(entry.state);
@@ -119,6 +121,7 @@ const runEffectChainWithoutResize = async ({ state, source, effects, output, wid
                     state.pool.assertContextNotLost(dst);
                 }
                 const setupState = ensureSetup(state, def, dst);
+                (0, effect_source_observer_js_1.publishEffectSource)(eff, currentImage, state);
                 def.apply({
                     source: currentImage,
                     target: dst,

package/dist/cjs/effects/use-memoized-effects.js

@@ -45,6 +45,8 @@ const sequence_activity_context_js_1 = require("../sequence-activity-context.js"
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
+const effect_source_observer_js_1 = require("./effect-source-observer.js");
 const emptyDragOverrides = {};
 const useCacheCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.useLayoutEffect;
 const areEffectParamsEqual = (previous, next) => {
@@ -227,6 +229,7 @@ exports.getPropStatusesCtx = getPropStatusesCtx;
 const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
     const nodePath = overrideId
@@ -308,6 +311,8 @@ const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     useCacheCommitEffect(() => {
         previousRef.current = { prepared, effects: next };
     }, [next, prepared]);
-    return next;
+    return (0, effect_source_observer_js_1.useEffectSourceInspection)(next, isStudio && nodePath !== null
+        ? (0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)({ ...nodePath, videoConfigValues })
+        : null);
 };
 exports.useMemoizedEffects = useMemoizedEffects;

package/dist/cjs/internals.d.ts

@@ -15,7 +15,9 @@ import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import { CompositionManagerProvider } from './CompositionManagerProvider.js';
 import { createElementSourceProxy } from './create-element-source-proxy.js';
 import * as CSSUtils from './default-css.js';
+import { createCurveSampler } from './effects/create-curve-sampler.js';
 import { createEffect } from './effects/create-effect.js';
+import { subscribeToEffectSource } from './effects/effect-source-observer.js';
 import { cleanupEffectChainState, createEffectChainState, runEffectChain } from './effects/run-effect-chain.js';
 import { useEffectChainState } from './effects/use-effect-chain-state.js';
 import { getEffectPropStatusesCtx, getPropStatusesCtx, useMemoizedEffectDefinitions, useMemoizedEffects } from './effects/use-memoized-effects.js';
@@ -1197,8 +1199,10 @@ export declare const Internals: {
     readonly cleanupEffectChainState: typeof cleanupEffectChainState;
     readonly runEffectChain: typeof runEffectChain;
     readonly useMemoizedEffects: typeof useMemoizedEffects;
+    readonly subscribeToEffectSource: typeof subscribeToEffectSource;
     readonly useMemoizedEffectDefinitions: typeof useMemoizedEffectDefinitions;
     readonly createEffect: typeof createEffect;
+    readonly createCurveSampler: typeof createCurveSampler;
     readonly createWebGLContextError: typeof createWebGLContextError;
     readonly createWebGL2ContextError: typeof createWebGL2ContextError;
     readonly computeEffectiveSchemaValuesDotNotation: typeof computeEffectiveSchemaValuesDotNotation;

package/dist/cjs/internals.js

@@ -58,7 +58,9 @@ const CSSUtils = __importStar(require("./default-css.js"));
 const default_css_js_1 = require("./default-css.js");
 const DefaultPremountContext_js_1 = require("./DefaultPremountContext.js");
 const EditorProps_js_1 = require("./EditorProps.js");
+const create_curve_sampler_js_1 = require("./effects/create-curve-sampler.js");
 const create_effect_js_1 = require("./effects/create-effect.js");
+const effect_source_observer_js_1 = require("./effects/effect-source-observer.js");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -338,8 +340,10 @@ exports.Internals = {
     cleanupEffectChainState: run_effect_chain_js_1.cleanupEffectChainState,
     runEffectChain: run_effect_chain_js_1.runEffectChain,
     useMemoizedEffects: use_memoized_effects_js_1.useMemoizedEffects,
+    subscribeToEffectSource: effect_source_observer_js_1.subscribeToEffectSource,
     useMemoizedEffectDefinitions: use_memoized_effects_js_1.useMemoizedEffectDefinitions,
     createEffect: create_effect_js_1.createEffect,
+    createCurveSampler: create_curve_sampler_js_1.createCurveSampler,
     createWebGLContextError: webgl2_context_error_js_1.createWebGLContextError,
     createWebGL2ContextError: webgl2_context_error_js_1.createWebGL2ContextError,
     computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,

package/dist/cjs/interpolate-colors.js

@@ -138,15 +138,19 @@ function parseModernComponent(str, percentScale) {
 function parseHueAngle(str) {
     if (str === 'none')
         return 0;
-    if (str.endsWith('rad')) {
-        return (Number.parseFloat(str) * 180) / Math.PI;
+    let degrees = Number.parseFloat(str);
+    if (str.endsWith('grad')) {
+        degrees *= 0.9;
+    }
+    else if (str.endsWith('rad')) {
+        degrees = (degrees * 180) / Math.PI;
+    }
+    else if (str.endsWith('turn')) {
+        degrees *= 360;
     }
-    if (str.endsWith('grad'))
-        return Number.parseFloat(str) * 0.9;
-    if (str.endsWith('turn'))
-        return Number.parseFloat(str) * 360;
     // 'deg' suffix or plain number = degrees
-    return Number.parseFloat(str);
+    const normalized = degrees % 360;
+    return normalized < 0 ? (normalized + 360) % 360 : normalized;
 }
 function parseModernAlpha(str) {
     if (str === undefined || str === 'none')

package/dist/cjs/interpolate.js

@@ -456,6 +456,21 @@ const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolat
         output,
     });
 };
+const getInputForInterpolation = ({ input, inputRange, options, }) => {
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? input
+        : Math.floor(input / options.posterize) * options.posterize;
+    const inputMin = inputRange[0];
+    const inputMax = inputRange[inputRange.length - 1];
+    if (inputRange.length === 1 ||
+        !((posterizedInput < inputMin && (options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'wrap') ||
+            (posterizedInput > inputMax && (options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'wrap'))) {
+        return posterizedInput;
+    }
+    // Wrap before choosing a segment so the entire keyframe range repeats.
+    const range = inputMax - inputMin;
+    return ((((posterizedInput - inputMin) % range) + range) % range) + inputMin;
+};
 const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     const output = resolveOutputOption(options === null || options === void 0 ? void 0 : options.output);
     if (inputRange.length === 1) {
@@ -470,16 +485,18 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) !== undefined) {
         extrapolateRight = options.extrapolateRight;
     }
-    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
-        ? input
-        : Math.floor(input / options.posterize) * options.posterize;
-    const range = findRange(posterizedInput, inputRange);
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
+    const range = findRange(resolvedInput, inputRange);
     const easing = resolveEasingForSegment({
         easing: easingOption,
         segmentIndex: range,
     });
     let result = interpolateSegment({
-        input: posterizedInput,
+        input: resolvedInput,
         inputRange: [inputRange[range], inputRange[range + 1]],
         outputRange: [outputRange[range], outputRange[range + 1]],
         easing,
@@ -496,11 +513,11 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
             continue;
         }
         const previousSegmentEnd = inputRange[segmentIndex + 1];
-        if (posterizedInput <= previousSegmentEnd) {
+        if (resolvedInput <= previousSegmentEnd) {
             continue;
         }
         const continuedSegmentValue = interpolateSegment({
-            input: posterizedInput,
+            input: resolvedInput,
             inputRange: [inputRange[segmentIndex], previousSegmentEnd],
             outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
             easing: previousEasing,
@@ -516,10 +533,12 @@ const interpolateString = ({ input, inputRange, outputRange, options, outputType
     var _a;
     const initiallyParsedOutputRange = outputRange.map((output) => parseStringInterpolationValue(output, outputType));
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
-    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
-        ? input
-        : Math.floor(input / options.posterize) * options.posterize;
-    const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
+    const segmentIndex = inputRange.length === 1 ? 0 : findRange(resolvedInput, inputRange);
     const parsedOutputRange = hasAxisRotation
         ? initiallyParsedOutputRange.map((parsed, index) => {
             if (parsed.kind !== 'rotate') {
@@ -658,27 +677,20 @@ const interpolateDiscreteValue = ({ input, inputRange, outputRange, options, })
                 : 'Non-numeric strings can only be interpolated using Easing.step1');
         }
     }
-    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
-        ? input
-        : Math.floor(input / options.posterize) * options.posterize;
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
     const inputMin = inputRange[0];
     const inputMax = inputRange[inputRange.length - 1];
-    let resolvedInput = posterizedInput;
     if (resolvedInput < inputMin) {
         if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'identity') {
             throw new TypeError(typeof outputRange[0] === 'boolean'
                 ? 'extrapolateLeft: "identity" is not supported for booleans'
                 : 'extrapolateLeft: "identity" is not supported for non-numeric strings');
         }
-        if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'wrap') {
-            const wrapRange = inputMax - inputMin;
-            resolvedInput =
-                ((((resolvedInput - inputMin) % wrapRange) + wrapRange) % wrapRange) +
-                    inputMin;
-        }
-        else {
-            return outputRange[0];
-        }
+        return outputRange[0];
     }
     if (resolvedInput > inputMax) {
         if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'identity') {
@@ -686,15 +698,7 @@ const interpolateDiscreteValue = ({ input, inputRange, outputRange, options, })
                 ? 'extrapolateRight: "identity" is not supported for booleans'
                 : 'extrapolateRight: "identity" is not supported for non-numeric strings');
         }
-        if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'wrap') {
-            const wrapRange = inputMax - inputMin;
-            resolvedInput =
-                ((((resolvedInput - inputMin) % wrapRange) + wrapRange) % wrapRange) +
-                    inputMin;
-        }
-        else {
-            return outputRange[outputRange.length - 1];
-        }
+        return outputRange[outputRange.length - 1];
     }
     const range = findRange(resolvedInput, inputRange);
     return resolvedInput >= inputRange[range + 1]

package/dist/cjs/nonce.d.ts

@@ -0,0 +1,11 @@
+export type TNonceContext = {
+    getNonce: () => number;
+};
+type NonceHistoryItem = [number, number];
+export type NonceHistory = NonceHistoryItem[];
+export type NonceHistoryContext = {
+    get: () => NonceHistory;
+};
+export declare const NonceContext: import("react").Context<TNonceContext>;
+export declare const useNonce: () => NonceHistoryContext;
+export {};

package/dist/cjs/nonce.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNonce = exports.NonceContext = void 0;
+const react_1 = require("react");
+exports.NonceContext = (0, react_1.createContext)({
+    getNonce: () => 0,
+});
+let fastRefreshNonce = 0;
+try {
+    if (typeof __webpack_module__ !== 'undefined') {
+        if (__webpack_module__.hot) {
+            __webpack_module__.hot.addStatusHandler((status) => {
+                if (status === 'idle') {
+                    fastRefreshNonce++;
+                }
+            });
+        }
+    }
+}
+catch (_a) {
+    // __webpack_module__ may throw ReferenceError in some environments
+}
+const useNonce = () => {
+    const context = (0, react_1.useContext)(exports.NonceContext);
+    const nonce = context.getNonce();
+    const nonceRef = (0, react_1.useRef)(nonce);
+    nonceRef.current = nonce;
+    const history = (0, react_1.useRef)([[fastRefreshNonce, nonce]]);
+    const get = (0, react_1.useCallback)(() => {
+        if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+            history.current = [
+                ...history.current,
+                [fastRefreshNonce, nonceRef.current],
+            ];
+        }
+        return history.current;
+    }, [history]);
+    return (0, react_1.useMemo)(() => {
+        return { get };
+    }, [get]);
+};
+exports.useNonce = useNonce;