react-science 6.0.2 → 8.0.0

package/package.json

@@ -1,28 +1,16 @@
 {
   "name": "react-science",
-  "version": "6.0.2",
+  "version": "8.0.0",
   "description": "React components to build scientific applications UI",
+  "type": "module",
   "exports": {
-    "./app": {
-      "types": "./lib-esm/app/index.d.ts",
-      "require": "./lib/app/index.js",
-      "default": "./lib-esm/app/index.js"
-    },
-    "./app-data": {
-      "types": "./lib-esm/app-data/index.d.ts",
-      "require": "./lib/app-data/index.js",
-      "default": "./lib-esm/app-data/index.js"
-    },
-    "./ui": {
-      "types": "./lib-esm/components/index.d.ts",
-      "require": "./lib/components/index.js",
-      "default": "./lib-esm/components/index.js"
-    },
+    "./app": "./lib/app/index.js",
+    "./app-data": "./lib/app-data/index.js",
+    "./ui": "./lib/components/index.js",
     "./styles/*.css": "./styles/*.css"
   },
   "files": [
     "lib",
-    "lib-esm",
     "src",
     "styles/preflight.css"
   ],
@@ -31,9 +19,9 @@
     "build-all": "npm run build-app && npm run build-storybook && mv storybook-static dist/stories",
     "build-app": "cross-env NO_MINIFY=true vite build",
     "build-storybook": "storybook build",
-    "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build-ts": "tsc -p tsconfig.build.json",
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib-esm",
+    "clean": "rimraf lib",
     "createData": "npm run prepack && node scripts/createData",
     "dev": "echo Use npm run dev-app or npm run storybook && exit 1",
     "dev-app": "vite --open /pages/demo.html",
@@ -51,7 +39,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "20.17.0"
+    "node": "22.9.0"
   },
   "overrides": {
     "react": "^18.3.1",
@@ -65,34 +53,34 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.2.4",
+    "@blueprintjs/select": "^5.2.5",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-select": "^2.1.1",
-    "@tanstack/react-query": "^5.56.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-table": "^8.20.5",
     "biologic-converter": "^0.6.0",
     "cheminfo-types": "^1.8.0",
     "d3-scale-chromatic": "^3.1.0",
-    "filelist-utils": "^1.11.1",
+    "filelist-utils": "^1.11.2",
     "immer": "^10.1.1",
     "jcampconverter": "^9.6.4",
     "lodash": "^4.17.21",
     "ml-gsd": "^12.1.8",
     "ml-peak-shape-generator": "^4.1.4",
-    "ml-signal-processing": "^1.0.4",
-    "ml-spectra-processing": "^14.5.3",
-    "ms-spectrum": "^3.6.6",
+    "ml-signal-processing": "^1.1.1",
+    "ml-spectra-processing": "^14.6.0",
+    "ms-spectrum": "^3.6.8",
     "netcdfjs": "^3.0.0",
-    "react-d3-utils": "^1.0.0",
-    "react-dropzone": "^14.2.3",
+    "react-d3-utils": "^2.0.0",
+    "react-dropzone": "14.2.3",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
-    "react-plot": "^2.0.0",
+    "react-plot": "^3.0.0",
     "react-popper": "^2.3.0",
     "spc-parser": "^1.0.0",
     "tinycolor2": "^1.6.0",
@@ -100,32 +88,28 @@
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@blueprintjs/core": "^5.13.0",
+    "@blueprintjs/core": "^5.13.1",
     "@blueprintjs/icons": "^5.13.0",
-    "@playwright/experimental-ct-react": "^1.47.2",
-    "@playwright/test": "^1.47.2",
-    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-storysource": "^8.3.3",
-    "@storybook/blocks": "^8.3.3",
-    "@storybook/react": "^8.3.3",
-    "@storybook/react-vite": "^8.3.3",
+    "@playwright/experimental-ct-react": "^1.48.0",
+    "@playwright/test": "^1.48.0",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-storysource": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.0.3",
-    "@types/lodash": "^4.17.9",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/lodash": "^4.17.10",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@types/react-inspector": "^4.0.6",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.1.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "^2.1.3",
     "cheminfo-font": "^1.13.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-zakodium": "^12.0.0",
+    "eslint": "^9.12.0",
+    "eslint-config-zakodium": "^13.0.0",
     "eslint-plugin-storybook": "^0.9.0",
     "fifo-logger": "^1.0.0",
     "prettier": "^3.3.3",
@@ -133,12 +117,12 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-kbs": "^2.1.1",
-    "react-ocl": "^6.1.0",
+    "react-ocl": "^7.0.1",
     "rimraf": "^6.0.1",
-    "storybook": "^8.3.3",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1"
+    "storybook": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "repository": {
     "type": "git",

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -1,8 +1,8 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
-import { IconName } from '@blueprintjs/icons';
-import { type ReactElement, ReactNode } from 'react';
+import type { IconName } from '@blueprintjs/icons';
+import { type ReactElement, type ReactNode } from 'react';
 
-import { Toolbar, useOnOff } from '../../components';
+import { Toolbar, useOnOff } from '../../components/index.js';
 
 interface AboutDialogToolbarButtonProps {
   name: string;

package/src/app/about/index.ts

@@ -1 +1 @@
-export * from './AboutDialogToolbarButton';
+export * from './AboutDialogToolbarButton.js';

package/src/app/explorer/ExplorerPlotView.tsx

@@ -1,8 +1,8 @@
-import { useAppView } from '../../app-data/index';
-import { assertNotNull } from '../../components/index';
-import { IvPlotView, MassPlotView } from '../index';
+import { useAppView } from '../../app-data/index.js';
+import { assertNotNull } from '../../components/index.js';
+import { IvPlotView, MassPlotView } from '../index.js';
 
-import MeasurementExplorerWithState from './MeasurementExplorerWithState';
+import MeasurementExplorerWithState from './MeasurementExplorerWithState.js';
 
 export function ExplorerPlotView() {
   const appView = useAppView();

package/src/app/explorer/MeasurementExplorer.tsx

@@ -2,7 +2,10 @@ import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
 import { FaArrowsAltH, FaExchangeAlt } from 'react-icons/fa';
 
-import { MeasurementPlot, MeasurementPlotProps } from '../helpers';
+import {
+  MeasurementPlot,
+  type MeasurementPlotProps,
+} from '../helpers/index.js';
 
 export type MeasurementExplorerProps = Omit<
   MeasurementPlotProps,

package/src/app/explorer/MeasurementExplorerWithState.tsx

@@ -1,6 +1,9 @@
-import { getCurrentMeasurementData, useAppState } from '../../app-data/index';
+import {
+  getCurrentMeasurementData,
+  useAppState,
+} from '../../app-data/index.js';
 
-import { MeasurementExplorer } from './MeasurementExplorer';
+import { MeasurementExplorer } from './MeasurementExplorer.js';
 
 export default function MeasurementExplorerWithState() {
   const appState = useAppState();

package/src/app/explorer/index.ts

@@ -1,2 +1,2 @@
-export * from './ExplorerPlotView';
-export * from './MeasurementExplorer';
+export * from './ExplorerPlotView.js';
+export * from './MeasurementExplorer.js';

package/src/app/helpers/MeasurementPlot.tsx

@@ -2,9 +2,12 @@ import { xyToXYObject } from 'ml-spectra-processing';
 import { useMemo } from 'react';
 import { LineSeries, PlotController } from 'react-plot';
 
-import type { MeasurementBase, MeasurementAppView } from '../../app-data/index';
+import type {
+  MeasurementAppView,
+  MeasurementBase,
+} from '../../app-data/index.js';
 
-import { BasicComponent } from './index';
+import { BasicComponent } from './index.js';
 
 type Measurement = Pick<MeasurementBase, 'meta' | 'info' | 'data' | 'id'>;
 export interface MeasurementPlotProps {

package/src/app/helpers/getColorFromConfig.ts

@@ -1,4 +1,5 @@
-import { ColorConfig } from '../../app-data/index';
+import type { ColorConfig } from '../../app-data/index.js';
+
 // import { fixedGradientScales } from '../../components/index';
 
 export function getColorFromConfig(config: ColorConfig) {

package/src/app/helpers/index.ts

@@ -1,5 +1,5 @@
-export * from './getColorFromConfig';
-export * from './MeasurementPlot';
-export * from './react-plot';
-export * from './splitEntries';
-export * from './MeasurementVariableSelect';
+export * from './getColorFromConfig.js';
+export * from './MeasurementPlot.js';
+export * from './react-plot.js';
+export * from './splitEntries.js';
+export * from './MeasurementVariableSelect.js';

package/src/app/helpers/react-plot.tsx

@@ -2,18 +2,18 @@ import styled from '@emotion/styled';
 import { type ReactNode, useMemo } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import {
-  useRectangularZoom,
-  useAxisZoom,
+  Annotations,
+  Axis,
+  Heading,
+  Plot,
   useAxisWheelZoom,
+  useAxisZoom,
   useCrossHair,
   usePan,
-  Plot,
-  Heading,
-  Annotations,
-  Axis,
+  useRectangularZoom,
 } from 'react-plot';
 
-import type { MeasurementPlotProps } from './MeasurementPlot';
+import type { MeasurementPlotProps } from './MeasurementPlot.js';
 
 interface BasicComponentProps extends MeasurementPlotProps {
   children: ReactNode[] | ReactNode;

package/src/app/helpers/splitEntries.ts

@@ -1,9 +1,9 @@
 import {
-  AppState,
+  type AppState,
   iterateKindMeasurementsAndView,
-  MeasurementAndView,
-  MeasurementKind,
-} from '../../app-data/index';
+  type MeasurementAndView,
+  type MeasurementKind,
+} from '../../app-data/index.js';
 
 export function splitEntries<Kind extends MeasurementKind>(
   appState: AppState,

package/src/app/hooks/file-loading.ts

@@ -1,10 +1,10 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
 import type { FifoLogger } from 'fifo-logger';
 import { FileCollection, fileCollectionFromWebSource } from 'filelist-utils';
 import { useCallback } from 'react';
 
-import { AppDispatch, useAppDispatch } from '../../app-data';
-import { useFifoLogger, useHashSearchParams } from '../../components';
+import { type AppDispatch, useAppDispatch } from '../../app-data/index.js';
+import { useFifoLogger, useHashSearchParams } from '../../components/index.js';
 
 type LoadFn = (
   files: File[] | FileCollection,

package/src/app/hooks/index.ts

@@ -1 +1 @@
-export * from './file-loading';
+export * from './file-loading.js';

package/src/app/index.ts

@@ -1,5 +1,5 @@
-export * from './explorer/index';
-export * from './hooks/index';
-export * from './kinds/index';
-export * from './panels/index';
-export * from './about/index';
+export * from './explorer/index.js';
+export * from './hooks/index.js';
+export * from './kinds/index.js';
+export * from './panels/index.js';
+export * from './about/index.js';

package/src/app/kinds/index.ts

@@ -1,3 +1,3 @@
-export * from './ir/index';
-export * from './iv/index';
-export * from './mass/index';
+export * from './ir/index.js';
+export * from './iv/index.js';
+export * from './mass/index.js';

package/src/app/kinds/ir/IrPeaksPanel.tsx

@@ -1,8 +1,8 @@
-import { ColumnDef, SortingState } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 
-import type { IrPeak } from '../../../app-data/index';
-import { Table } from '../../../components/index';
+import type { IrPeak } from '../../../app-data/index.js';
+import { Table } from '../../../components/index.js';
 
 export interface IrColumnPreferences<T extends keyof IrPeak = keyof IrPeak> {
   visible?: boolean;

package/src/app/kinds/ir/index.ts

@@ -1 +1 @@
-export * from './IrPeaksPanel';
+export * from './IrPeaksPanel.js';

package/src/app/kinds/iv/index.ts

@@ -1 +1 @@
-export * from './plot-view/IvPlotView';
+export * from './plot-view/IvPlotView.js';

package/src/app/kinds/iv/plot-view/IvMeasurementsPlot.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import {
   Annotations,
@@ -10,11 +10,11 @@ import {
   usePlotEvents,
 } from 'react-plot';
 
-import { useAppDispatch, useAppState } from '../../../../app-data/index';
-import { assert } from '../../../../components/index';
-import { splitEntries } from '../../../helpers/index';
+import { useAppDispatch, useAppState } from '../../../../app-data/index.js';
+import { assert } from '../../../../components/index.js';
+import { splitEntries } from '../../../helpers/index.js';
 
-import IvSeries from './IvSeries';
+import IvSeries from './IvSeries.js';
 
 export default function IvMeasurementsPlot() {
   const appState = useAppState();

package/src/app/kinds/iv/plot-view/IvPlotVariablesSelector.tsx

@@ -2,9 +2,9 @@ import {
   getAllVariableSymbols,
   useAppDispatch,
   useAppState,
-} from '../../../../app-data/index';
-import { assertNotNull } from '../../../../components/index';
-import { MeasurementVariableSelect } from '../../../helpers/index';
+} from '../../../../app-data/index.js';
+import { assertNotNull } from '../../../../components/index.js';
+import { MeasurementVariableSelect } from '../../../helpers/index.js';
 
 export default function IvPlotVariablesSelector() {
   const {

package/src/app/kinds/iv/plot-view/IvPlotView.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import { PlotController } from 'react-plot';
 
-import { useAppDispatch, useAppState } from '../../../../app-data';
-import { Toolbar } from '../../../../components';
+import { useAppDispatch, useAppState } from '../../../../app-data/index.js';
+import { Toolbar } from '../../../../components/index.js';
 
-import IvMeasurementsPlot from './IvMeasurementsPlot';
-import IvPlotVariablesSelector from './IvPlotVariablesSelector';
+import IvMeasurementsPlot from './IvMeasurementsPlot.js';
+import IvPlotVariablesSelector from './IvPlotVariablesSelector.js';
 
 const IvPlotRoot = styled.div`
   display: flex;

package/src/app/kinds/iv/plot-view/IvSeries.tsx

@@ -3,11 +3,11 @@ import { useMemo } from 'react';
 import { LineSeries } from 'react-plot';
 
 import {
-  ColorConfig,
+  type ColorConfig,
   getVariableByLabel,
-  IvMeasurement,
-} from '../../../../app-data/index';
-import { getColorFromConfig } from '../../../helpers/index';
+  type IvMeasurement,
+} from '../../../../app-data/index.js';
+import { getColorFromConfig } from '../../../helpers/index.js';
 
 interface IvSeriesProps {
   measurement: IvMeasurement;

package/src/app/kinds/mass/MassPlotView.tsx

@@ -1,9 +1,9 @@
 import {
   getCurrentMeasurementData,
   useAppState,
-} from '../../../app-data/index';
+} from '../../../app-data/index.js';
 
-import { MeasurementMassPlot } from './MeasurementMassPlot';
+import { MeasurementMassPlot } from './MeasurementMassPlot.js';
 
 export function MassPlotView() {
   const appState = useAppState();

package/src/app/kinds/mass/MeasurementMassPlot.tsx

@@ -10,7 +10,10 @@ import {
   usePlotControllerAxes,
 } from 'react-plot';
 
-import { BasicComponent, MeasurementPlotProps } from '../../helpers/index';
+import {
+  BasicComponent,
+  type MeasurementPlotProps,
+} from '../../helpers/index.js';
 
 interface Peak {
   label: string;

package/src/app/kinds/mass/index.ts

@@ -1,2 +1,2 @@
-export * from './MassPlotView';
-export * from './MeasurementMassPlot';
+export * from './MassPlotView.js';
+export * from './MeasurementMassPlot.js';

package/src/app/panels/SignalProcessingPanel.tsx

@@ -1,7 +1,11 @@
 import type { FilterXYType } from 'ml-signal-processing';
-import filterXY from 'ml-signal-processing/FilterXYSchema.json';
+import filterXY from 'ml-signal-processing/FilterXYSchema.js';
 
-import { Button, createTableColumnHelper, Table } from '../../components/index';
+import {
+  Button,
+  createTableColumnHelper,
+  Table,
+} from '../../components/index.js';
 
 export interface Filter<OptionsType = string | number> {
   name: FilterXYType['name'];

package/src/app/panels/index.ts

@@ -1,4 +1,4 @@
-export * from './measurement-info/index';
-export * from './measurement-config/index';
-export * from './measurements/index';
-export * from './SignalProcessingPanel';
+export * from './measurement-info/index.js';
+export * from './measurement-config/index.js';
+export * from './measurements/index.js';
+export * from './SignalProcessingPanel.js';

package/src/app/panels/measurement-config/MeasurementConfigPanel.tsx

@@ -1,10 +1,10 @@
 import {
-  ColorConfig,
+  type ColorConfig,
   getFirstSelectedMeasurementData,
   useAppDispatch,
   useAppState,
-} from '../../../app-data/index';
-import { ColorPickerDropdown } from '../../../components/index';
+} from '../../../app-data/index.js';
+import { ColorPickerDropdown } from '../../../components/index.js';
 
 export function MeasurementConfigPanel() {
   const dispatch = useAppDispatch();

package/src/app/panels/measurement-config/MeasurementConfigPanelAccordion.tsx

@@ -1,7 +1,7 @@
-import { useAppState } from '../../../app-data/index';
-import { Accordion } from '../../../components/index';
+import { useAppState } from '../../../app-data/index.js';
+import { Accordion } from '../../../components/index.js';
 
-import { MeasurementConfigPanel } from './MeasurementConfigPanel';
+import { MeasurementConfigPanel } from './MeasurementConfigPanel.js';
 
 export function MeasurementConfigPanelAccordion() {
   const appState = useAppState();

package/src/app/panels/measurement-config/index.ts

@@ -1,2 +1,2 @@
-export * from './MeasurementConfigPanelAccordion';
-export * from './MeasurementConfigPanel';
+export * from './MeasurementConfigPanelAccordion.js';
+export * from './MeasurementConfigPanel.js';

package/src/app/panels/measurement-info/MeasurementInfoPanel.tsx

@@ -1,8 +1,8 @@
 import {
   getCurrentMeasurementData,
   useAppState,
-} from '../../../app-data/index';
-import { InfoPanelData, InfoPanel } from '../../../components/index';
+} from '../../../app-data/index.js';
+import { InfoPanel, type InfoPanelData } from '../../../components/index.js';
 
 export function MeasurementInfoPanel() {
   const appState = useAppState();

package/src/app/panels/measurement-info/MeasurementInfoPanelAccordion.tsx

@@ -1,6 +1,6 @@
-import { Accordion } from '../../../components/index';
+import { Accordion } from '../../../components/index.js';
 
-import { MeasurementInfoPanel } from './MeasurementInfoPanel';
+import { MeasurementInfoPanel } from './MeasurementInfoPanel.js';
 
 export function MeasurementInfoPanelAccordion() {
   return (

package/src/app/panels/measurement-info/index.ts

@@ -1,2 +1,2 @@
-export * from './MeasurementInfoPanel';
-export * from './MeasurementInfoPanelAccordion';
+export * from './MeasurementInfoPanel.js';
+export * from './MeasurementInfoPanelAccordion.js';

package/src/app/panels/measurements/MeasurementColorPreview.tsx

@@ -2,17 +2,17 @@ import styled from '@emotion/styled';
 import { useRef } from 'react';
 
 import {
-  ColorConfig,
-  MeasurementKind,
+  type ColorConfig,
+  type MeasurementKind,
   useAppDispatch,
-} from '../../../app-data/index';
+} from '../../../app-data/index.js';
 import {
   ColorPicker,
   ColorPreview,
   useModifiedPopper,
   useOnClickOutside,
   useOnOff,
-} from '../../../components/index';
+} from '../../../components/index.js';
 
 interface MeasurementColorPreviewProps {
   measurementId: string;

package/src/app/panels/measurements/MeasurementVisibilityToggle.tsx

@@ -1,7 +1,7 @@
-import { useAppDispatch } from '../../../app-data/index';
-import { Button } from '../../../components/index';
+import { useAppDispatch } from '../../../app-data/index.js';
+import { Button } from '../../../components/index.js';
 
-import { MeasurementsTableProps } from '.';
+import type { MeasurementsTableProps } from './index.js';
 
 interface MeasurementVisibilityToggleProps {
   id: string;

package/src/app/panels/measurements/MeasurementsPanel.tsx

@@ -1,17 +1,17 @@
 /** @jsxImportSource @emotion/react */
-import { PanelProps, Tab, Tabs } from '@blueprintjs/core';
+import { type PanelProps, Tab, Tabs } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { useMemo } from 'react';
 
 import {
   kindLabels,
-  MeasurementKind,
+  type MeasurementKind,
   measurementKinds,
   useAppDispatch,
   useAppState,
-} from '../../../app-data';
+} from '../../../app-data/index.js';
 
-import { MeasurementPanelProvider, MeasurementsTable } from '.';
+import { MeasurementPanelProvider, MeasurementsTable } from './index.js';
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
 export function MeasurementsPanel({ openPanel }: PanelProps<object>) {

package/src/app/panels/measurements/MeasurementsPanelAccordion.tsx

@@ -6,10 +6,10 @@ import {
   getExistingMeasurementKinds,
   kindLabels,
   useAppData,
-} from '../../../app-data/index';
-import { Accordion } from '../../../components/index';
+} from '../../../app-data/index.js';
+import { Accordion } from '../../../components/index.js';
 
-import { MeasurementsPanel } from '.';
+import { MeasurementsPanel } from './index.js';
 
 export function MeasurementsPanelAccordion() {
   const appData = useAppData();