@imfusion/sdk-react 0.7.0-dev.31.g0ba92924

package/dist/useContextMenu.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Registers a context menu handler that fires when the SDK produces a
+ * context menu from an input event.
+ *
+ * @param callback - Receives the {@link @imfusion/sdk!Menu | Menu} and the DOM {@link Event} that triggered it
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function ContextMenuHandler() {
+ *   useContextMenu((menu, event) => {
+ *     event.preventDefault();
+ *     // Build a custom menu UI from menu.items()
+ *   });
+ *   return null;
+ * }
+ * ```
+ */
+export function useContextMenu(callback) {
+    const imf = useImFusion();
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        const off = imf.onContextMenu((menu, event) => callbackRef.current(menu, event));
+        return off;
+    }, [imf]);
+}

package/dist/useData.d.ts

@@ -0,0 +1,26 @@
+import type { Data, HandleArray } from '@imfusion/sdk';
+/**
+ * Returns a reactive list of all data in the data model.
+ *
+ * Subscribes to {@link @imfusion/sdk!DataModel.onDataAdded | DataModel.onDataAdded} and
+ * {@link @imfusion/sdk!DataModel.onDataAboutToBeRemoved | DataModel.onDataAboutToBeRemoved}.
+ *
+ * @returns A {@link @imfusion/sdk!HandleArray | HandleArray} of all data
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DataList() {
+ *   const data = useData();
+ *   return (
+ *     <ul>
+ *       {data.map((d, i) => <li key={i}>{d.name}</li>)}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useVisibleData}
+ */
+export declare function useData(): HandleArray<Data>;

package/dist/useData.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Returns a reactive list of all data in the data model.
+ *
+ * Subscribes to {@link @imfusion/sdk!DataModel.onDataAdded | DataModel.onDataAdded} and
+ * {@link @imfusion/sdk!DataModel.onDataAboutToBeRemoved | DataModel.onDataAboutToBeRemoved}.
+ *
+ * @returns A {@link @imfusion/sdk!HandleArray | HandleArray} of all data
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DataList() {
+ *   const data = useData();
+ *   return (
+ *     <ul>
+ *       {data.map((d, i) => <li key={i}>{d.name}</li>)}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useVisibleData}
+ */
+export function useData() {
+    const imf = useImFusion();
+    const [data, setData] = useState(() => imf.dataModel.data());
+    useEffect(() => {
+        const refresh = () => setData(imf.dataModel.data());
+        const offAdded = imf.dataModel.onDataAdded(refresh);
+        const offRemoved = imf.dataModel.onDataAboutToBeRemoved(() => queueMicrotask(refresh));
+        return () => {
+            offAdded();
+            offRemoved();
+        };
+    }, [imf]);
+    return data;
+}

package/dist/useDataLoader.d.ts

@@ -0,0 +1,50 @@
+import type { Data, HandleArray } from '@imfusion/sdk';
+export interface DataLoaderProgress {
+    received: number;
+    total: number | null;
+}
+/**
+ * Provides data loading methods with reactive loading, progress, and error state.
+ *
+ * Wraps {@link @imfusion/sdk!ImFusion.loadUrl | ImFusion.loadUrl}, {@link @imfusion/sdk!ImFusion.loadFile | ImFusion.loadFile},
+ * {@link @imfusion/sdk!ImFusion.loadBuffer | ImFusion.loadBuffer}, and {@link @imfusion/sdk!ImFusion.loadFolder | ImFusion.loadFolder} with
+ * React-friendly state management.
+ *
+ * State (`isLoading`, `progress`, `error`) tracks a single load operation at a time.
+ * Concurrent loads from the same hook instance are not supported, use separate instances if needed.
+ *
+ * @returns A memoized object with load methods and state
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function LoadButton() {
+ *   const { loadUrl, isLoading, progress, error } = useDataLoader();
+ *   return (
+ *     <>
+ *       <button onClick={() => loadUrl('/data/ct.nii.gz')} disabled={isLoading}>
+ *         Load CT
+ *       </button>
+ *       {isLoading && progress && (
+ *         <p>{Math.round((progress.received / (progress.total ?? 1)) * 100)}%</p>
+ *       )}
+ *       {error && <p>Error: {error.message}</p>}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useData}
+ * @see {@link useVisibleData}
+ */
+export declare function useDataLoader(): {
+    loadUrl: (url: string) => Promise<HandleArray<Data>>;
+    loadFile: (file: File) => Promise<HandleArray<Data>>;
+    loadBuffer: (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>>;
+    loadFolder: (files: File[]) => Promise<HandleArray<Data>>;
+    isLoading: boolean;
+    progress: DataLoaderProgress | null;
+    error: Error | null;
+    reset: () => void;
+};

package/dist/useDataLoader.js

@@ -0,0 +1,70 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Provides data loading methods with reactive loading, progress, and error state.
+ *
+ * Wraps {@link @imfusion/sdk!ImFusion.loadUrl | ImFusion.loadUrl}, {@link @imfusion/sdk!ImFusion.loadFile | ImFusion.loadFile},
+ * {@link @imfusion/sdk!ImFusion.loadBuffer | ImFusion.loadBuffer}, and {@link @imfusion/sdk!ImFusion.loadFolder | ImFusion.loadFolder} with
+ * React-friendly state management.
+ *
+ * State (`isLoading`, `progress`, `error`) tracks a single load operation at a time.
+ * Concurrent loads from the same hook instance are not supported, use separate instances if needed.
+ *
+ * @returns A memoized object with load methods and state
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function LoadButton() {
+ *   const { loadUrl, isLoading, progress, error } = useDataLoader();
+ *   return (
+ *     <>
+ *       <button onClick={() => loadUrl('/data/ct.nii.gz')} disabled={isLoading}>
+ *         Load CT
+ *       </button>
+ *       {isLoading && progress && (
+ *         <p>{Math.round((progress.received / (progress.total ?? 1)) * 100)}%</p>
+ *       )}
+ *       {error && <p>Error: {error.message}</p>}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useData}
+ * @see {@link useVisibleData}
+ */
+export function useDataLoader() {
+    const imf = useImFusion();
+    const [isLoading, setIsLoading] = useState(false);
+    const [progress, setProgress] = useState(null);
+    const [error, setError] = useState(null);
+    const run = useCallback(async (fn) => {
+        setIsLoading(true);
+        setError(null);
+        setProgress(null);
+        try {
+            return await fn();
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            setError(e);
+            throw e;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    const loadUrl = useCallback((url) => run(() => imf.loadUrl(url, {
+        onProgress: (received, total) => setProgress({ received, total }),
+    })), [imf, run]);
+    const loadFile = useCallback((file) => run(() => imf.loadFile(file)), [imf, run]);
+    const loadBuffer = useCallback((buffer, filename) => run(() => imf.loadBuffer(buffer, filename)), [imf, run]);
+    const loadFolder = useCallback((files) => run(() => imf.loadFolder(files)), [imf, run]);
+    const reset = useCallback(() => {
+        setError(null);
+        setProgress(null);
+    }, []);
+    return useMemo(() => ({ loadUrl, loadFile, loadBuffer, loadFolder, isLoading, progress, error, reset }), [loadUrl, loadFile, loadBuffer, loadFolder, isLoading, progress, error, reset]);
+}

package/dist/useDisplayOptions.d.ts

@@ -0,0 +1,59 @@
+import type { SharedImageSet, DisplayOptions2d, DisplayOptions3d } from '@imfusion/sdk';
+/**
+ * Returns the reactive 2D display options for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayOptions2d.onChanged | DisplayOptions2d.onChanged}. The hook triggers a
+ * re-render whenever the options change.
+ *
+ * @param sis - The dataset whose 2D display options to observe
+ * @returns The {@link @imfusion/sdk!DisplayOptions2d | DisplayOptions2d} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DisplayControls2D({ sis }: { sis: SharedImageSet }) {
+ *   const opts = useDisplayOptions2d(sis);
+ *   return (
+ *     <div>
+ *       <p>Window: {opts.window} / Level: {opts.level}</p>
+ *       <button onClick={() => { opts.window = 400; opts.level = 40; }}>
+ *         Lung preset
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useDisplayOptions3d}
+ */
+export declare function useDisplayOptions2d(sis: SharedImageSet): DisplayOptions2d;
+/**
+ * Returns the reactive 3D display options for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayOptions3d.onChanged | DisplayOptions3d.onChanged}. The hook triggers a
+ * re-render whenever the options change.
+ *
+ * @param sis - The dataset whose 3D display options to observe
+ * @returns The {@link @imfusion/sdk!DisplayOptions3d | DisplayOptions3d} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DisplayControls3D({ sis }: { sis: SharedImageSet }) {
+ *   const opts = useDisplayOptions3d(sis);
+ *   return (
+ *     <div>
+ *       <p>Window: {opts.window} / Level: {opts.level}</p>
+ *       <button onClick={() => { opts.window = 400; opts.level = 40; }}>
+ *         Lung preset
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useDisplayOptions2d}
+ */
+export declare function useDisplayOptions3d(sis: SharedImageSet): DisplayOptions3d;

package/dist/useDisplayOptions.js

@@ -0,0 +1,87 @@
+import { useState, useEffect, useReducer } from 'react';
+import { useImFusion } from './useImFusion.js';
+import { useStableHandle } from './useStableHandle.js';
+/**
+ * Returns the reactive 2D display options for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayOptions2d.onChanged | DisplayOptions2d.onChanged}. The hook triggers a
+ * re-render whenever the options change.
+ *
+ * @param sis - The dataset whose 2D display options to observe
+ * @returns The {@link @imfusion/sdk!DisplayOptions2d | DisplayOptions2d} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DisplayControls2D({ sis }: { sis: SharedImageSet }) {
+ *   const opts = useDisplayOptions2d(sis);
+ *   return (
+ *     <div>
+ *       <p>Window: {opts.window} / Level: {opts.level}</p>
+ *       <button onClick={() => { opts.window = 400; opts.level = 40; }}>
+ *         Lung preset
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useDisplayOptions3d}
+ */
+export function useDisplayOptions2d(sis) {
+    useImFusion();
+    // Triggers a re-render without mirroring all C++ properties as React state.
+    const [, forceUpdate] = useReducer((x) => !x, false);
+    const stableSis = useStableHandle(sis);
+    const [options, setOptions] = useState(() => stableSis.displayOptions2d());
+    useEffect(() => {
+        const opts = stableSis.displayOptions2d();
+        setOptions(opts);
+        const off = opts.onChanged(() => forceUpdate());
+        return off;
+    }, [stableSis]);
+    return options;
+}
+/**
+ * Returns the reactive 3D display options for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayOptions3d.onChanged | DisplayOptions3d.onChanged}. The hook triggers a
+ * re-render whenever the options change.
+ *
+ * @param sis - The dataset whose 3D display options to observe
+ * @returns The {@link @imfusion/sdk!DisplayOptions3d | DisplayOptions3d} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function DisplayControls3D({ sis }: { sis: SharedImageSet }) {
+ *   const opts = useDisplayOptions3d(sis);
+ *   return (
+ *     <div>
+ *       <p>Window: {opts.window} / Level: {opts.level}</p>
+ *       <button onClick={() => { opts.window = 400; opts.level = 40; }}>
+ *         Lung preset
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useDisplayOptions2d}
+ */
+export function useDisplayOptions3d(sis) {
+    useImFusion();
+    // Triggers a re-render without mirroring all C++ properties as React state.
+    const [, forceUpdate] = useReducer((x) => !x, false);
+    const stableSis = useStableHandle(sis);
+    const [options, setOptions] = useState(() => stableSis.displayOptions3d());
+    useEffect(() => {
+        const opts = stableSis.displayOptions3d();
+        setOptions(opts);
+        const off = opts.onChanged(() => forceUpdate());
+        return off;
+    }, [stableSis]);
+    return options;
+}

package/dist/useFrameSelection.d.ts

@@ -0,0 +1,32 @@
+import type { SharedImageSet } from '@imfusion/sdk';
+/**
+ * Returns the reactive selection for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!SharedImageSet.onSelectionChanged | SharedImageSet.onSelectionChanged}.
+ *
+ * @param sis - The dataset to observe
+ * @returns The current focus index, a setter, and the total frame count
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function FrameSlider({ sis }: { sis: SharedImageSet }) {
+ *   const { focus, setFocus, count } = useFrameSelection(sis);
+ *   return (
+ *     <input
+ *       type="range"
+ *       min={0}
+ *       max={count - 1}
+ *       value={focus}
+ *       onChange={e => setFocus(Number(e.target.value))}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function useFrameSelection(sis: SharedImageSet): {
+    focus: number;
+    setFocus: (index: number) => void;
+    count: number;
+};

package/dist/useFrameSelection.js

@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useImFusion } from './useImFusion.js';
+import { useStableHandle } from './useStableHandle.js';
+/**
+ * Returns the reactive selection for a dataset.
+ *
+ * Subscribes to {@link @imfusion/sdk!SharedImageSet.onSelectionChanged | SharedImageSet.onSelectionChanged}.
+ *
+ * @param sis - The dataset to observe
+ * @returns The current focus index, a setter, and the total frame count
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function FrameSlider({ sis }: { sis: SharedImageSet }) {
+ *   const { focus, setFocus, count } = useFrameSelection(sis);
+ *   return (
+ *     <input
+ *       type="range"
+ *       min={0}
+ *       max={count - 1}
+ *       value={focus}
+ *       onChange={e => setFocus(Number(e.target.value))}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useFrameSelection(sis) {
+    useImFusion();
+    const stableSis = useStableHandle(sis);
+    const [focus, setFocusState] = useState(() => stableSis.focus());
+    useEffect(() => {
+        setFocusState(stableSis.focus());
+        const off = stableSis.onSelectionChanged(() => {
+            setFocusState(stableSis.focus());
+        });
+        return off;
+    }, [stableSis]);
+    const setFocus = useCallback((index) => stableSis.setFocus(index), [stableSis]);
+    return { focus, setFocus, count: stableSis.size() };
+}

package/dist/useImFusion.d.ts

@@ -0,0 +1,22 @@
+import type { ImFusion } from '@imfusion/sdk';
+/**
+ * Returns the initialized ImFusion SDK instance.
+ *
+ * Throws if the SDK is not yet ready. Safe to call inside {@link ImFusionReady}.
+ *
+ * @returns The initialized {@link @imfusion/sdk!ImFusion | ImFusion} instance
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const imf = useImFusion();
+ *   return <button onClick={() => imf.render()}>Render</button>;
+ * }
+ * ```
+ *
+ * @see {@link ImFusionReady}
+ * @see {@link useImFusionState}
+ */
+export declare function useImFusion(): ImFusion;

package/dist/useImFusion.js

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { ImFusionContext } from './context.js';
+/**
+ * Returns the initialized ImFusion SDK instance.
+ *
+ * Throws if the SDK is not yet ready. Safe to call inside {@link ImFusionReady}.
+ *
+ * @returns The initialized {@link @imfusion/sdk!ImFusion | ImFusion} instance
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const imf = useImFusion();
+ *   return <button onClick={() => imf.render()}>Render</button>;
+ * }
+ * ```
+ *
+ * @see {@link ImFusionReady}
+ * @see {@link useImFusionState}
+ */
+export function useImFusion() {
+    const context = useContext(ImFusionContext);
+    if (!context) {
+        throw new Error('useImFusion must be used within an ImFusionProvider');
+    }
+    if (!context.imf) {
+        throw new Error('ImFusion SDK is not yet initialized');
+    }
+    return context.imf;
+}

package/dist/useImFusionError.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns the SDK initialization error.
+ *
+ * Throws if no error has occurred. Safe to call inside {@link ImFusionError}.
+ *
+ * @returns The initialization {@link Error}
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called when there is no error
+ *
+ * @example
+ * ```tsx
+ * function ErrorDisplay() {
+ *   const error = useImFusionError();
+ *   return <p>Failed to initialize: {error.message}</p>;
+ * }
+ * ```
+ *
+ * @see {@link ImFusionError}
+ * @see {@link useImFusionState}
+ */
+export declare function useImFusionError(): Error;

package/dist/useImFusionError.js

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { ImFusionContext } from './context.js';
+/**
+ * Returns the SDK initialization error.
+ *
+ * Throws if no error has occurred. Safe to call inside {@link ImFusionError}.
+ *
+ * @returns The initialization {@link Error}
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called when there is no error
+ *
+ * @example
+ * ```tsx
+ * function ErrorDisplay() {
+ *   const error = useImFusionError();
+ *   return <p>Failed to initialize: {error.message}</p>;
+ * }
+ * ```
+ *
+ * @see {@link ImFusionError}
+ * @see {@link useImFusionState}
+ */
+export function useImFusionError() {
+    const context = useContext(ImFusionContext);
+    if (!context) {
+        throw new Error('useImFusionError must be used within an ImFusionProvider');
+    }
+    if (!context.error) {
+        throw new Error('No initialization error has occurred');
+    }
+    return context.error;
+}

package/dist/useImFusionState.d.ts

@@ -0,0 +1,31 @@
+import type { ImFusion } from '@imfusion/sdk';
+export interface ImFusionState {
+    /** The initialized SDK instance, or null if not yet ready. */
+    imf: ImFusion | null;
+    /** The initialization error, or null if no error occurred. */
+    error: Error | null;
+}
+/**
+ * Returns the SDK initialization state.
+ *
+ * Both `imf` and `error` are nullable. Use this when you need to handle
+ * loading, ready, and error states in a single component.
+ *
+ * @returns The current {@link ImFusionState}
+ * @throws If called outside of an {@link ImFusionProvider}
+ *
+ * @example
+ * ```tsx
+ * function StatusBar() {
+ *   const { imf, error } = useImFusionState();
+ *
+ *   if (error) return <p>Error: {error.message}</p>;
+ *   if (!imf) return <p>Loading...</p>;
+ *   return <p>Ready</p>;
+ * }
+ * ```
+ *
+ * @see {@link useImFusion}
+ * @see {@link useImFusionError}
+ */
+export declare function useImFusionState(): ImFusionState;

package/dist/useImFusionState.js

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { ImFusionContext } from './context.js';
+/**
+ * Returns the SDK initialization state.
+ *
+ * Both `imf` and `error` are nullable. Use this when you need to handle
+ * loading, ready, and error states in a single component.
+ *
+ * @returns The current {@link ImFusionState}
+ * @throws If called outside of an {@link ImFusionProvider}
+ *
+ * @example
+ * ```tsx
+ * function StatusBar() {
+ *   const { imf, error } = useImFusionState();
+ *
+ *   if (error) return <p>Error: {error.message}</p>;
+ *   if (!imf) return <p>Loading...</p>;
+ *   return <p>Ready</p>;
+ * }
+ * ```
+ *
+ * @see {@link useImFusion}
+ * @see {@link useImFusionError}
+ */
+export function useImFusionState() {
+    const context = useContext(ImFusionContext);
+    if (!context) {
+        throw new Error('useImFusionState must be used within an ImFusionProvider');
+    }
+    return { imf: context.imf, error: context.error };
+}

package/dist/useLayoutMode.d.ts

@@ -0,0 +1,29 @@
+import type { DisplayLayoutMode } from '@imfusion/sdk';
+/**
+ * Returns the reactive display layout mode.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayAutoLayouter.onModeChanged | DisplayAutoLayouter.onModeChanged}.
+ *
+ * @returns The current mode and a function to change it
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function LayoutPicker() {
+ *   const { mode, setMode } = useLayoutMode();
+ *   return (
+ *     <select value={mode} onChange={e => setMode(e.target.value as DisplayLayoutMode)}>
+ *       <option value="Auto">Auto</option>
+ *       <option value="Rows">Rows</option>
+ *       <option value="FocusPlusStack">Focus + Stack</option>
+ *       <option value="FocusPlusRows">Focus + Rows</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+export declare function useLayoutMode(): {
+    mode: DisplayLayoutMode;
+    setMode: (mode: DisplayLayoutMode) => void;
+};