@jupytergis/base 0.13.2 → 0.14.0

package/lib/formbuilder/objectform/source/pathbasedsource.d.ts

@@ -1,19 +1,3 @@
-import { IDict } from '@jupytergis/schema';
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
-import { ISourceFormProps, SourcePropertiesForm } from './sourceform';
-/**
- * The form to modify a PathBasedSource source.
- */
-export declare class PathBasedSourcePropertiesForm extends SourcePropertiesForm {
-    constructor(props: ISourceFormProps);
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
-    protected onFormBlur(id: string, value: any): void;
-    protected onFormChange(e: IChangeEvent): void;
-    protected onFormSubmit(e: ISubmitEvent<any>): void;
-    /**
-     * Validate the path, to avoid invalid path.
-     *
-     * @param path - the path to validate.
-     */
-    protected _validatePath(path: string): Promise<void>;
-}
+import React from 'react';
+import type { ISourceFormProps } from './sourceform';
+export declare function PathBasedSourcePropertiesForm(props: ISourceFormProps): React.ReactElement | null;

package/lib/formbuilder/objectform/source/pathbasedsource.js

@@ -1,70 +1,29 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
-import { FileSelectorWidget } from "../fileselectorwidget";
-import { loadFile } from "../../../tools";
-import { SourcePropertiesForm } from './sourceform';
-/**
- * The form to modify a PathBasedSource source.
- */
-export class PathBasedSourcePropertiesForm extends SourcePropertiesForm {
-    constructor(props) {
-        var _a, _b;
-        super(props);
-        if (this.props.sourceType !== 'GeoJSONSource') {
-            this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
-        }
-    }
-    processSchema(data, schema, uiSchema) {
-        var _a;
-        super.processSchema(data, schema, uiSchema);
-        if (!schema.properties || !data) {
-            return;
-        }
-        // Customize the widget for path field
-        if (schema.properties && schema.properties.path) {
-            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
-            uiSchema.path = {
-                'ui:widget': FileSelectorWidget,
-                'ui:options': {
-                    docManager,
-                    formOptions: this.props,
-                },
-            };
-        }
-        // This is not user-editable
-        delete schema.properties.valid;
-    }
-    onFormBlur(id, value) {
-        // Is there a better way to spot the path text entry?
-        if (!id.endsWith('_path')) {
-            return;
-        }
-        this._validatePath(value);
-    }
-    // we need to use `onFormChange` instead of `onFormBlur` because it's no longer a text field
-    onFormChange(e) {
-        var _a;
-        super.onFormChange(e);
-        if (((_a = e.formData) === null || _a === void 0 ? void 0 : _a.path) !== undefined) {
-            this._validatePath(e.formData.path);
-        }
-    }
-    onFormSubmit(e) {
-        var _a, _b, _c;
-        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
-            showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
-            return;
-        }
-        super.onFormSubmit(e);
-    }
-    /**
-     * Validate the path, to avoid invalid path.
-     *
-     * @param path - the path to validate.
-     */
-    async _validatePath(path) {
-        const extraErrors = this.state.extraErrors;
-        let error = '';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { deepCopy, loadFile } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { FileSelectorWidget } from '../fileselectorwidget';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+export function PathBasedSourcePropertiesForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, sourceType, dialogOptions, formErrorSignal, formSchemaRegistry, cancel, } = props;
+    const { formData, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
+            }
+            : undefined,
+    });
+    const [extraErrors, setExtraErrors] = useState({});
+    const validatePath = useCallback(async (path) => {
+        const nextErrors = {};
         let valid = true;
+        let error = '';
         if (!path) {
             valid = false;
             error = 'Path is required';
@@ -73,26 +32,68 @@ export class PathBasedSourcePropertiesForm extends SourcePropertiesForm {
             try {
                 await loadFile({
                     filepath: path,
-                    type: this.props.sourceType,
-                    model: this.props.model,
+                    type: sourceType,
+                    model,
                 });
             }
             catch (e) {
                 valid = false;
-                error = `"${path}" is not a valid ${this.props.sourceType} file.`;
+                error = `"${path}" is not a valid ${sourceType} file.`;
             }
         }
         if (!valid) {
-            extraErrors.path = {
-                __errors: [error],
-            };
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors })));
+            nextErrors.path = { __errors: [error] };
         }
         else {
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { path: { __errors: [] } }) })));
+            nextErrors.path = { __errors: [] };
         }
-        if (this.props.formErrorSignal) {
-            this.props.formErrorSignal.emit(!valid);
+        setExtraErrors(nextErrors);
+        formErrorSignal === null || formErrorSignal === void 0 ? void 0 : formErrorSignal.emit(!valid);
+    }, [model, sourceType, formErrorSignal]);
+    const schema = useMemo(() => {
+        const schemaCopy = deepCopy(schemaProp !== null && schemaProp !== void 0 ? schemaProp : {});
+        if (schemaCopy.properties) {
+            delete schemaCopy.properties.valid;
         }
+        return schemaCopy;
+    }, [schemaProp]);
+    const uiSchema = useMemo(() => {
+        var _a;
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        const docManager = formSchemaRegistry === null || formSchemaRegistry === void 0 ? void 0 : formSchemaRegistry.getDocManager();
+        if (((_a = schema.properties) === null || _a === void 0 ? void 0 : _a.path) && docManager) {
+            builtUiSchema.path = {
+                'ui:widget': FileSelectorWidget,
+                'ui:options': {
+                    docManager,
+                    formOptions: props,
+                },
+            };
+        }
+        return builtUiSchema;
+    }, [schema, formData, formContext, formSchemaRegistry, props]);
+    const handleChange = useCallback((data) => {
+        handleChangeBase(data);
+        if (data.path !== undefined) {
+            validatePath(data.path);
+        }
+    }, [handleChangeBase, validatePath]);
+    const handleSubmit = useCallback((data) => {
+        var _a, _b;
+        if (((_b = (_a = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.path) === null || _a === void 0 ? void 0 : _a.__errors) === null || _b === void 0 ? void 0 : _b.length) >= 1) {
+            showErrorMessage('Invalid file', extraErrors.path.__errors[0]);
+            return;
+        }
+        handleSubmitBase(data);
+    }, [extraErrors, handleSubmitBase]);
+    useEffect(() => {
+        var _a;
+        validatePath((_a = formData === null || formData === void 0 ? void 0 : formData.path) !== null && _a !== void 0 ? _a : '');
+    }, []);
+    if (!hasSchema) {
+        return null;
     }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChange, onSubmit: handleSubmit, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, extraErrors: extraErrors, formErrorSignal: formErrorSignal }));
 }

package/lib/formbuilder/objectform/source/sourceform.d.ts

@@ -1,7 +1,11 @@
+/**
+ * Base (default) source form and props.
+ * Used for RasterSource and any source type without a dedicated form.
+ */
 import { IDict, SourceType } from '@jupytergis/schema';
 import { Signal } from '@lumino/signaling';
-import { IChangeEvent } from '@rjsf/core';
-import { BaseForm, IBaseFormProps } from "../baseform";
+import React from 'react';
+import type { IBaseFormProps } from "../../../types";
 export interface ISourceFormProps extends IBaseFormProps {
     /**
      * The source type for this form.
@@ -16,9 +20,4 @@ export interface ISourceFormProps extends IBaseFormProps {
      */
     dialogOptions?: any;
 }
-export declare class SourcePropertiesForm extends BaseForm {
-    props: ISourceFormProps;
-    protected sourceFormChangedSignal: Signal<any, IDict<any>> | undefined;
-    constructor(props: ISourceFormProps);
-    protected onFormChange(e: IChangeEvent): void;
-}
+export declare function SourcePropertiesForm(props: ISourceFormProps): React.ReactElement | null;

package/lib/formbuilder/objectform/source/sourceform.js

@@ -1,13 +1,30 @@
-import { BaseForm, } from "../baseform";
-export class SourcePropertiesForm extends BaseForm {
-    constructor(props) {
-        super(props);
-        this.sourceFormChangedSignal = props.sourceFormChangedSignal;
-    }
-    onFormChange(e) {
-        super.onFormChange(e);
-        if (this.props.dialogOptions) {
-            this.props.dialogOptions.sourceData = Object.assign({}, e.formData);
-        }
+import React, { useMemo } from 'react';
+import { deepCopy } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+export function SourcePropertiesForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, dialogOptions, cancel, formErrorSignal, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
+            }
+            : undefined,
+    });
+    const uiSchema = useMemo(() => {
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        return builtUiSchema;
+    }, [schema, formData, formContext]);
+    if (!hasSchema) {
+        return null;
     }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, formErrorSignal: formErrorSignal }));
 }

package/lib/formbuilder/objectform/source/tilesourceform.d.ts

@@ -1,7 +1,3 @@
-import { IDict } from '@jupytergis/schema';
-import { SourcePropertiesForm } from './sourceform';
-export declare class TileSourcePropertiesForm extends SourcePropertiesForm {
-    private _urlParameters;
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
-    protected onFormBlur(id: string, value: any): void;
-}
+import React from 'react';
+import type { ISourceFormProps } from './sourceform';
+export declare function TileSourcePropertiesForm(props: ISourceFormProps): React.ReactElement | null;

package/lib/formbuilder/objectform/source/tilesourceform.js

@@ -1,60 +1,70 @@
-import { SourcePropertiesForm } from './sourceform';
-export class TileSourcePropertiesForm extends SourcePropertiesForm {
-    constructor() {
-        super(...arguments);
-        this._urlParameters = [];
+import React, { useMemo } from 'react';
+import { deepCopy } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+function getUrlParameters(url) {
+    if (!url || typeof url !== 'string') {
+        return [];
     }
-    processSchema(data, schema, uiSchema) {
-        super.processSchema(data, schema, uiSchema);
-        if (!schema.properties || !data) {
-            return;
+    const regex = /\{([^}]+)\}/g;
+    const matches = [];
+    let match;
+    while ((match = regex.exec(url)) !== null) {
+        if (['max_zoom', 'min_zoom', 'x', 'y', 'z'].includes(match[1])) {
+            continue;
         }
-        // Grep all url-parameters from the url
-        const regex = /\{([^}]+)\}/g;
-        const matches = [];
-        let match;
-        while ((match = regex.exec(data.url)) !== null) {
-            if (['max_zoom', 'min_zoom', 'x', 'y', 'z'].includes(match[1])) {
-                continue;
+        matches.push(match[1]);
+    }
+    return matches;
+}
+export function TileSourcePropertiesForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, dialogOptions, cancel, formErrorSignal, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
             }
-            matches.push(match[1]);
-        }
-        this._urlParameters = matches;
-        if (matches.length === 0) {
-            this.removeFormEntry('urlParameters', data, schema, uiSchema);
-            return;
-        }
-        // Dynamically inject url parameters schema based of the url
-        const propertiesSchema = {};
-        schema.properties.urlParameters = {
-            type: 'object',
-            required: this._urlParameters,
-            properties: propertiesSchema,
-        };
-        for (const parameterName of this._urlParameters) {
-            switch (parameterName) {
-                // Special case for "time" where a date picker widget is nicer
-                case 'time':
-                    propertiesSchema[parameterName] = {
-                        type: 'string',
-                        format: 'date',
-                    };
-                    break;
-                default:
-                    propertiesSchema[parameterName] = {
-                        type: 'string',
-                    };
-                    break;
+            : undefined,
+    });
+    const uiSchema = useMemo(() => {
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        if (schema.properties && (formData === null || formData === void 0 ? void 0 : formData.url)) {
+            const urlParams = getUrlParameters(formData.url);
+            if (urlParams.length === 0) {
+                removeFormEntry('urlParameters', dataCopy, schema, builtUiSchema);
+            }
+            else {
+                const propertiesSchema = {};
+                schema.properties.urlParameters = {
+                    type: 'object',
+                    required: urlParams,
+                    properties: propertiesSchema,
+                };
+                for (const parameterName of urlParams) {
+                    if (parameterName === 'time') {
+                        propertiesSchema[parameterName] = {
+                            type: 'string',
+                            format: 'date',
+                        };
+                    }
+                    else {
+                        propertiesSchema[parameterName] = { type: 'string' };
+                    }
+                }
             }
         }
+        return builtUiSchema;
+    }, [schema, formData, formContext]);
+    if (!hasSchema) {
+        return null;
     }
-    onFormBlur(id, value) {
-        super.onFormBlur(id, value);
-        // Is there a better way to spot the url text entry?
-        if (!id.endsWith('_url')) {
-            return;
-        }
-        // Force a rerender on url change, as it probably changes the schema
-        this.forceUpdate();
-    }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, formErrorSignal: formErrorSignal }));
 }

package/lib/formbuilder/objectform/useSchemaFormState.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Shared state for schema-based forms: form data synced from sourceData,
+ * copied schema, form context, and optional base change/submit handlers.
+ * Forms use handleChangeBase/handleSubmitBase directly or wrap them for
+ * validation and extra logic.
+ */
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { RJSFSchema } from '@rjsf/utils';
+import { type Dispatch, type SetStateAction } from 'react';
+import { IDict } from "../../types";
+export interface IUseSchemaFormStateProps {
+    /** External data to sync into the form (e.g. layer/source parameters). */
+    sourceData: IDict | undefined;
+    /** JSON Schema for the form (will be deep-copied). */
+    schemaProp: IDict | undefined;
+    /** Current JGIS model. */
+    model: IJupyterGISModel;
+    /** Called when form data changes (enables handleChangeBase). */
+    syncData?: (data: IDict) => void;
+    /** Called when form is submitted (enables handleSubmitBase). */
+    cancel?: () => void;
+    /** Optional side effect after change (e.g. update dialogOptions.layerData). */
+    onAfterChange?: (data: IDict) => void;
+}
+export interface IUseSchemaFormStateResult {
+    /** Current form data (controlled state). */
+    formData: IDict;
+    /** Set form data (e.g. from onChange). */
+    setFormData: Dispatch<SetStateAction<IDict>>;
+    /** Schema to pass to SchemaForm (deep copy of schemaProp). */
+    schema: RJSFSchema;
+    /** Form context value { model, formData } for SchemaForm. */
+    formContextValue: {
+        model: IJupyterGISModel;
+        formData: IDict;
+    };
+    /** Whether the form has a schema (false => form may render null). */
+    hasSchema: boolean;
+    /** Base change handler: setFormData, syncData, onAfterChange. Use or wrap. */
+    handleChangeBase: (data: IDict) => void;
+    /** Base submit handler: syncData(data), cancel?.(). Use or wrap. */
+    handleSubmitBase: (data: IDict) => void;
+}
+/**
+ * Manages form data state, schema copy, and form context for object forms.
+ * Callers supply uiSchema, handleChange, handleSubmit, and any validation.
+ */
+export declare function useSchemaFormState(props: IUseSchemaFormStateProps): IUseSchemaFormStateResult;

package/lib/formbuilder/objectform/useSchemaFormState.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { deepCopy } from "../../tools";
+/**
+ * Manages form data state, schema copy, and form context for object forms.
+ * Callers supply uiSchema, handleChange, handleSubmit, and any validation.
+ */
+export function useSchemaFormState(props) {
+    const { sourceData, schemaProp, model, syncData, cancel, onAfterChange } = props;
+    const [formData, setFormData] = useState(() => deepCopy(sourceData !== null && sourceData !== void 0 ? sourceData : {}));
+    useEffect(() => {
+        if (sourceData !== undefined) {
+            setFormData(deepCopy(sourceData !== null && sourceData !== void 0 ? sourceData : {}));
+        }
+    }, [sourceData]);
+    const schema = useMemo(() => deepCopy(schemaProp !== null && schemaProp !== void 0 ? schemaProp : {}), [schemaProp]);
+    const formContextValue = useMemo(() => ({ model, formData }), [model, formData]);
+    const handleChangeBase = useCallback((data) => {
+        setFormData(data);
+        syncData === null || syncData === void 0 ? void 0 : syncData(data);
+        onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(data);
+    }, [syncData, onAfterChange]);
+    const handleSubmitBase = useCallback((data) => {
+        syncData === null || syncData === void 0 ? void 0 : syncData(data);
+        cancel === null || cancel === void 0 ? void 0 : cancel();
+    }, [syncData, cancel]);
+    return {
+        formData,
+        setFormData,
+        schema,
+        formContextValue,
+        hasSchema: schemaProp !== null,
+        handleChangeBase,
+        handleSubmitBase,
+    };
+}

package/lib/index.d.ts

@@ -2,7 +2,6 @@ export * from './annotations';
 export * from './commands/index';
 export * from './constants';
 export * from './dialogs/layerCreationFormDialog';
-export * from './formbuilder/objectform/baseform';
 export * from './icons';
 export * from './mainview';
 export * from './menus';

package/lib/index.js

@@ -2,7 +2,6 @@ export * from './annotations';
 export * from './commands/index';
 export * from './constants';
 export * from './dialogs/layerCreationFormDialog';
-export * from './formbuilder/objectform/baseform';
 export * from './icons';
 export * from './mainview';
 export * from './menus';

package/lib/keybindings.json

@@ -1,4 +1,14 @@
 [
+    {
+        "command": "jupytergis:storyPrev",
+        "keys": ["ArrowLeft"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:storyNext",
+        "keys": ["ArrowRight"],
+        "selector": ".data-jgis-keybinding"
+    },
     {
         "command": "jupytergis:undo",
         "keys": ["Accel Z"],
@@ -19,16 +29,6 @@
         "keys": ["Accel I"],
         "selector": ".data-jgis-keybinding"
     },
-    {
-        "command": "jupytergis:removeSource",
-        "keys": ["Delete"],
-        "selector": ".data-jgis-keybinding .jp-gis-source.jp-gis-sourceUnused"
-    },
-    {
-        "command": "jupytergis:renameSource",
-        "keys": ["F2"],
-        "selector": ".data-jgis-keybinding .jp-gis-source"
-    },
     {
         "command": "jupytergis:removeSelected",
         "keys": ["Delete"],

package/lib/mainview/mainView.d.ts

@@ -5,13 +5,13 @@ import { Layer } from 'ol/layer';
 import * as React from 'react';
 import { ClientPointer } from './CollaboratorPointers';
 import { MainViewModel } from './mainviewmodel';
-interface IProps {
+interface IMainViewProps {
     viewModel: MainViewModel;
     state?: IStateDB;
     formSchemaRegistry?: IJGISFormSchemaRegistry;
     annotationModel?: IAnnotationModel;
     /** True when viewport matches (max-width: 768px). Injected by MainViewWithMediaQuery. */
-    isMobile?: boolean;
+    isMobile: boolean;
 }
 interface IStates {
     id: string;
@@ -35,11 +35,12 @@ interface IStates {
     filterStates: IDict<IJGISFilterItem | undefined>;
     jgisSettings: IJupyterGISSettings;
     isSpectaPresentation: boolean;
+    initialLayersReady: boolean;
 }
-export declare class MainView extends React.Component<IProps, IStates> {
-    constructor(props: IProps);
+export declare class MainView extends React.Component<IMainViewProps, IStates> {
+    constructor(props: IMainViewProps);
     componentDidMount(): Promise<void>;
-    componentDidUpdate(prevProps: IProps, prevState: IStates): void;
+    componentDidUpdate(prevProps: IMainViewProps, prevState: IStates): void;
     componentWillUnmount(): void;
     generateMap(center: number[], zoom: number): Promise<void>;
     updateCenter: () => void;
@@ -182,7 +183,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _removeAllInteractions;
     private _setupStoryScrollListener;
     private _cleanupStoryScrollListener;
-    private _updateSpectaPresentationColors;
     private _onSharedMetadataChanged;
     private _computeAnnotationPosition;
     private _updateAnnotation;
@@ -198,6 +198,8 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _handleGeolocationChanged;
     private _handleThemeChange;
     private _handleWindowResize;
+    private _handleSpectaTouchStart;
+    private _handleSpectaTouchEnd;
     render(): JSX.Element;
     private _clickCoords;
     private _commands;
@@ -227,7 +229,9 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _storyScrollHandler;
     private _clearStoryScrollGuard;
     private _pendingStoryScrollRafId;
+    private _initialLayersCount;
+    private _spectaTouchStartX;
 }
 /** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
-declare function MainViewWithMediaQuery(props: IProps): React.JSX.Element;
+declare function MainViewWithMediaQuery(props: Omit<IMainViewProps, 'isMobile'>): React.JSX.Element;
 export { MainViewWithMediaQuery };