@remotion/studio 4.0.431 → 4.0.432

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -3,12 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
-const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -19,33 +16,10 @@ const expandedSectionBase = {
     paddingRight: 10,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const fieldRow = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-};
-const fieldName = {
-    fontSize: 12,
-};
-const fieldLabelRow = {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-};
-const TimelineFieldRow = ({ field, onSave, onDragValueChange, onDragEnd, propStatus }) => {
-    var _a, _b;
-    return (jsx_runtime_1.jsxs("div", { style: { ...fieldRow, height: field.rowHeight }, children: [
-            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _b !== void 0 ? _b : false })
-        ] }));
-};
 const TimelineExpandedSection = ({ sequence, originalLocation }) => {
     var _a;
-    var _b, _c, _d, _e;
-    const [propStatuses, setPropStatuses] = (0, react_1.useState)(null);
-    const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const clientId = state.type === 'connected' ? state.clientId : undefined;
+    var _b;
+    const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
     const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -60,126 +34,16 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const locationSource = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _b !== void 0 ? _b : null;
-    const locationLine = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _c !== void 0 ? _c : null;
-    const locationColumn = (_d = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _d !== void 0 ? _d : null;
-    const schemaKeysString = (0, react_1.useMemo)(() => (schemaFields ? schemaFields.map((f) => f.key).join(',') : null), [schemaFields]);
-    const currentLocationSource = (0, react_1.useRef)(locationSource);
-    currentLocationSource.current = locationSource;
-    const currentLocationLine = (0, react_1.useRef)(locationLine);
-    currentLocationLine.current = locationLine;
-    const currentLocationColumn = (0, react_1.useRef)(locationColumn);
-    currentLocationColumn.current = locationColumn;
-    (0, react_1.useEffect)(() => {
-        if (!clientId ||
-            !locationSource ||
-            !locationLine ||
-            locationColumn === null ||
-            !schemaKeysString) {
-            setPropStatuses(null);
-            return;
-        }
-        const keys = schemaKeysString.split(',');
-        (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
-            fileName: locationSource,
-            line: locationLine,
-            column: locationColumn,
-            keys,
-            clientId,
-        })
-            .then((result) => {
-            if (currentLocationSource.current !== locationSource ||
-                currentLocationLine.current !== locationLine ||
-                currentLocationColumn.current !== locationColumn) {
-                return;
-            }
-            if (result.canUpdate) {
-                setPropStatuses(result.props);
-            }
-            else {
-                setPropStatuses(null);
-            }
-        })
-            .catch(() => {
-            setPropStatuses(null);
-        });
-        return () => {
-            (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
-                fileName: locationSource,
-                line: locationLine,
-                column: locationColumn,
-                clientId,
-            }).catch(() => {
-                // Ignore unsubscribe errors
-            });
-        };
-    }, [
-        clientId,
-        locationSource,
-        locationLine,
-        locationColumn,
-        schemaKeysString,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (!locationSource || !locationLine || locationColumn === null) {
-            return;
-        }
-        const listener = (event) => {
-            if (event.type !== 'sequence-props-updated') {
-                return;
-            }
-            if (event.fileName !== currentLocationSource.current ||
-                event.line !== currentLocationLine.current ||
-                event.column !== currentLocationColumn.current) {
-                return;
-            }
-            if (event.result.canUpdate) {
-                setPropStatuses(event.result.props);
-            }
-            else {
-                setPropStatuses(null);
-            }
-        };
-        const unsub = subscribeToEvent('sequence-props-updated', listener);
-        return () => {
-            unsub();
-        };
-    }, [locationSource, locationLine, locationColumn, subscribeToEvent]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence.controls), [sequence.controls]);
-    const { setOverride, clearOverrides } = (0, react_1.useContext)(remotion_1.Internals.SequenceControlOverrideContext);
-    const onSave = (0, react_1.useCallback)((key, value) => {
-        if (!propStatuses || !validatedLocation) {
-            return Promise.reject(new Error('Cannot save'));
-        }
-        const status = propStatuses[key];
-        if (!status || !status.canUpdate) {
-            return Promise.reject(new Error('Cannot save'));
-        }
-        const field = schemaFields === null || schemaFields === void 0 ? void 0 : schemaFields.find((f) => f.key === key);
-        const defaultValue = field && field.fieldSchema.default !== undefined
-            ? JSON.stringify(field.fieldSchema.default)
-            : null;
-        return (0, call_api_1.callApi)('/api/save-sequence-props', {
-            fileName: validatedLocation.source,
-            line: validatedLocation.line,
-            column: validatedLocation.column,
-            key,
-            value: JSON.stringify(value),
-            enumPaths: [],
-            defaultValue,
-        }).then(() => undefined);
-    }, [propStatuses, validatedLocation, schemaFields]);
-    const overrideId = (_e = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _e !== void 0 ? _e : sequence.id;
-    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
-        setOverride(overrideId, key, value);
-    }, [setOverride, overrideId]);
-    const onDragEnd = (0, react_1.useCallback)(() => {
-        clearOverrides(overrideId);
-    }, [clearOverrides, overrideId]);
-    return (jsx_runtime_1.jsx("div", { style: { ...expandedSectionBase, height: expandedHeight }, children: schemaFields
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...expandedSectionBase,
+            height: expandedHeight,
+        };
+    }, [expandedHeight]);
+    return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
             ? schemaFields.map((field) => {
-                var _a;
-                return (jsx_runtime_1.jsx(TimelineFieldRow, { field: field, propStatus: (_a = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _a !== void 0 ? _a : null, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }, field.key));
+                return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation }, field.key));
             })
             : 'No schema' }));
 };

package/dist/components/Timeline/TimelineFieldRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineFieldRow: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly overrideId: string;
+    readonly validatedLocation: CodePosition | null;
+}>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const call_api_1 = require("../call-api");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const fieldRow = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    paddingLeft: 24,
+};
+const fieldName = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+};
+const fieldLabelRow = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+};
+const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
+    var _a, _b, _c, _d;
+    const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
+    const propStatus = (_b = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _b !== void 0 ? _b : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [dragOverrides, overrideId, field.key]);
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue: propStatus,
+        runtimeValue: field.currentValue,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+    });
+    const onSave = (0, react_1.useCallback)((key, value) => {
+        if (!propStatuses || !validatedLocation) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const status = propStatuses[key];
+        if (!status || !status.canUpdate) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        return (0, call_api_1.callApi)('/api/save-sequence-props', {
+            fileName: validatedLocation.source,
+            line: validatedLocation.line,
+            column: validatedLocation.column,
+            key,
+            value: JSON.stringify(value),
+            enumPaths: [],
+            defaultValue,
+        }).then(() => undefined);
+    }, [propStatuses, validatedLocation, field.fieldSchema.default]);
+    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
+        setDragOverrides(overrideId, key, value);
+    }, [setDragOverrides, overrideId]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(overrideId);
+    }, [clearDragOverrides, overrideId]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRow,
+            height: field.rowHeight,
+        };
+    }, [field.rowHeight]);
+    return (jsx_runtime_1.jsxs("div", { style: style, children: [
+            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue })
+        ] }));
+};
+exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineListItem.js

@@ -11,7 +11,8 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
-const get_stack_1 = require("./TimelineStack/get-stack");
+const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 const SPACING = 5;
 const space = {
     width: SPACING,
@@ -36,27 +37,15 @@ const arrowButton = {
     lineHeight: 1,
 };
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
-    var _a;
+    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
         previewServerState.type === 'connected';
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!sequence.stack) {
-            return;
-        }
-        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack, 'sequence')
-            .then((frame) => {
-            setOriginalLocation(frame);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error('Could not get original location of Sequence', err);
-        });
-    }, [sequence.stack]);
-    const isExpanded = visualModeEnabled && ((_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false);
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
+    (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
+    const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);

package/dist/components/Timeline/TimelineSchemaField.d.ts

@@ -1,5 +1,5 @@
-import type { CanUpdateSequencePropStatus } from '@remotion/studio-shared';
 import React from 'react';
+import type { CanUpdateSequencePropStatus } from 'remotion';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
@@ -8,6 +8,7 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onDragEnd: () => void;
     readonly canUpdate: boolean;
     readonly propStatus: CanUpdateSequencePropStatus | null;
+    readonly effectiveValue: unknown;
 }>;
 export declare const TimelineFieldSavingSpinner: React.FC<{
     readonly saving: boolean;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -73,8 +73,7 @@ const TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
     }, [canUpdate, onSave, field.key, checked]);
     return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
 };
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate }) => {
-    var _a, _b;
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, }) => {
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
         : undefined;
@@ -87,14 +86,13 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (propStatus === null) {
         return (jsx_runtime_1.jsx("span", { style: { ...notEditableBackground }, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
     }
-    const effectiveCodeValue = (_b = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.currentValue) !== null && _b !== void 0 ? _b : field.fieldSchema.default;
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveValue, canUpdate: canUpdate, onSave: onSave }) }));
     }
-    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveCodeValue) }));
+    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };
 exports.TimelineFieldValue = TimelineFieldValue;
 const TimelineFieldSavingSpinner = ({ saving }) => {

package/dist/components/Timeline/use-resolved-stack.d.ts

@@ -0,0 +1,2 @@
+import type { ResolvedStackLocation } from 'remotion';
+export declare const useResolvedStack: (stack: string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResolvedStack = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_stack_1 = require("./TimelineStack/get-stack");
+const resolvedCache = new Map();
+const inFlight = new Set();
+const subscribers = new Map();
+const useResolvedStack = (stack) => {
+    const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
+    const [value, setValue] = (0, react_1.useState)(() => {
+        var _a;
+        if (!stack) {
+            return null;
+        }
+        return (_a = resolvedCache.get(stack)) !== null && _a !== void 0 ? _a : null;
+    });
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        if (resolvedCache.has(stack)) {
+            setValue(resolvedCache.get(stack));
+            return;
+        }
+        if (!subscribers.has(stack)) {
+            subscribers.set(stack, new Set());
+        }
+        const subs = subscribers.get(stack);
+        subs.add(setValue);
+        if (!inFlight.has(stack)) {
+            inFlight.add(stack);
+            (0, get_stack_1.getOriginalLocationFromStack)(stack, 'sequence')
+                .then((frame) => {
+                resolvedCache.set(stack, frame);
+                updateResolvedStackTrace(stack, frame);
+                subs.forEach((fn) => fn(frame));
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error('Could not get original location of Sequence', err);
+            })
+                .finally(() => {
+                inFlight.delete(stack);
+            });
+        }
+        return () => {
+            subs.delete(setValue);
+        };
+    }, [stack, updateResolvedStackTrace]);
+    return value;
+};
+exports.useResolvedStack = useResolvedStack;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -0,0 +1,3 @@
+import type { TSequence } from 'remotion';
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => void;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequencePropsSubscription = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const useSequencePropsSubscription = (sequence, originalLocation) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
+    const setPropStatusesForSequence = (0, react_1.useCallback)((statuses) => {
+        if (!overrideId) {
+            return;
+        }
+        setCodeValues(overrideId, statuses);
+    }, [overrideId, setCodeValues]);
+    const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = state.type === 'connected' ? state.clientId : undefined;
+    const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
+    const schemaKeysString = (0, react_1.useMemo)(() => (schemaFields ? schemaFields.map((f) => f.key).join(',') : null), [schemaFields]);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const locationSource = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _c !== void 0 ? _c : null;
+    const locationLine = (_d = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _d !== void 0 ? _d : null;
+    const locationColumn = (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _e !== void 0 ? _e : null;
+    const currentLocationSource = (0, react_1.useRef)(locationSource);
+    currentLocationSource.current = locationSource;
+    const currentLocationLine = (0, react_1.useRef)(locationLine);
+    currentLocationLine.current = locationLine;
+    const currentLocationColumn = (0, react_1.useRef)(locationColumn);
+    currentLocationColumn.current = locationColumn;
+    (0, react_1.useEffect)(() => {
+        if (!clientId ||
+            !locationSource ||
+            !locationLine ||
+            locationColumn === null ||
+            !schemaKeysString) {
+            setPropStatusesForSequence(null);
+            return;
+        }
+        const keys = schemaKeysString.split(',');
+        (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+            fileName: locationSource,
+            line: locationLine,
+            column: locationColumn,
+            keys,
+            clientId,
+        })
+            .then((result) => {
+            if (currentLocationSource.current !== locationSource ||
+                currentLocationLine.current !== locationLine ||
+                currentLocationColumn.current !== locationColumn) {
+                return;
+            }
+            if (result.canUpdate) {
+                setPropStatusesForSequence(result.props);
+            }
+            else {
+                setPropStatusesForSequence(null);
+            }
+        })
+            .catch(() => {
+            setPropStatusesForSequence(null);
+        });
+        return () => {
+            setPropStatusesForSequence(null);
+            (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                fileName: locationSource,
+                line: locationLine,
+                column: locationColumn,
+                clientId,
+            }).catch(() => {
+                // Ignore unsubscribe errors
+            });
+        };
+    }, [
+        clientId,
+        locationSource,
+        locationLine,
+        locationColumn,
+        schemaKeysString,
+        setPropStatusesForSequence,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!locationSource || !locationLine || locationColumn === null) {
+            return;
+        }
+        const listener = (event) => {
+            if (event.type !== 'sequence-props-updated') {
+                return;
+            }
+            if (event.fileName !== currentLocationSource.current ||
+                event.line !== currentLocationLine.current ||
+                event.column !== currentLocationColumn.current) {
+                return;
+            }
+            if (event.result.canUpdate) {
+                setPropStatusesForSequence(event.result.props);
+            }
+            else {
+                setPropStatusesForSequence(null);
+            }
+        };
+        const unsub = subscribeToEvent('sequence-props-updated', listener);
+        return () => {
+            unsub();
+        };
+    }, [
+        locationSource,
+        locationLine,
+        locationColumn,
+        subscribeToEvent,
+        setPropStatusesForSequence,
+    ]);
+};
+exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/error-overlay/react-overlay/utils/get-source-map.d.ts

@@ -4,5 +4,10 @@ export type OriginalPosition = {
     column: number | null;
     source: string | null;
 };
+export type CodePosition = {
+    line: number;
+    column: number;
+    source: string;
+};
 export declare const getOriginalPosition: (source_map: SourceMapConsumer, line: number, column: number) => OriginalPosition;
 export declare function getSourceMap(fileUri: string, fileContents: string): Promise<SourceMapConsumer | null>;