@equinor/videx-3d 5.1.0-beta

package/dist/types/components/CameraTargetMarker/CameraTargetMarker.d.ts

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { Color } from 'three';
+/**
+ * Props for CameraTargetMarker
+ * @expand
+ */
+export type CameraTargetMarkerProps = {
+    radius?: number;
+    opacity?: number;
+    color?: number | string | Color;
+    fixedX?: number;
+    fixedY?: number;
+    fixedZ?: number;
+    renderOrder?: number;
+    depthTest?: boolean;
+    depthWrite?: boolean;
+};
+/**
+ * A simple component for indicating the current camera target.
+ *
+ * NOTE: You may pass a child node to this component if you want to use a custom object representing the camera target. If you do, you'll have to
+ * manage the material settings yourself, as depthTest and depthWrite only have an effect on the default object's material.
+ *
+ * @example
+ * <CameraTargetMarker />
+ *
+ * @group Components
+ */
+export declare const CameraTargetMarker: ({ radius, opacity, color, fixedX, fixedY, fixedZ, renderOrder, depthTest, depthWrite, children, }: PropsWithChildren<CameraTargetMarkerProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Distance/Distance.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+/**
+ * Distance props
+ * @expand
+ */
+export type DistanceProps = {
+    min?: number;
+    max: number;
+    onDemand?: boolean;
+    children: ReactNode;
+};
+/**
+ * The Distance component can be used to conditionally render other components.
+ *
+ * @example
+ * <Wellbore id={wellboreId}>
+ *  { // DistanceContext provider }
+ *   <WellboreBounds id={wellboreId}>
+ *     <BasicTrajectory />
+ *     <Distance min={0} max={2000}>
+ *       <TubeTrajectory />
+ *     </Distance>
+ *   </WellboreBounds>
+ * </Wellbore>
+ *
+ * @remarks
+ * This component depends on a `DistanceContext` being provided by a parent component.
+ *
+ * @see [Storybook](/videx-3d/?path=/docs/components-misc-distance--docs)
+ * @see {@link DistanceContext}
+ * @see {@link WellboreBounds}
+ *
+ * @group Components
+ */
+export declare const Distance: ({ min, max, onDemand, children, }: DistanceProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Distance/DistanceContext.d.ts

@@ -0,0 +1,12 @@
+export type DistanceContextProps = {
+    current: number;
+};
+/**
+ * A context for providing an object's distance to the camera. This will allow child
+ * components to use the `Distance` component.
+ *
+ * @see {@link Distance}
+ *
+ * @group Contexts
+ */
+export declare const DistanceContext: import('react').Context<DistanceContextProps>;

package/dist/types/components/Distance/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Distance';
+export * from './DistanceContext';

package/dist/types/components/EventEmitter/EventEmitter.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BufferGeometry, Material, Object3D } from 'three';
+import { PickResult } from './picking-helper';
+export type EmitterCallback = (e: PickResult) => void;
+/**
+ * EventEmitter props
+ * @expand
+ */
+export type EventEmitterProps = {
+    autoUpdate?: boolean;
+    autoUpdateRenderPriority?: number;
+    threshold?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+    onResult?: EmitterCallback;
+    children?: ReactNode;
+};
+export type RenderableObject = Object3D & {
+    material: Material;
+    geometry: BufferGeometry;
+};
+export declare const EventEmitter: ({ autoUpdate, autoUpdateRenderPriority, threshold, onResult, children, }: EventEmitterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/EventEmitter/EventEmitterContext.d.ts

@@ -0,0 +1,90 @@
+import { Camera, Object3D } from 'three';
+import { Vec2, Vec3 } from '../../sdk';
+export type KeysPressed = {
+    altKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+};
+export type EventEmitterCallbackEvent = {
+    target: Object3D;
+    source: Object3D;
+    instanceIndex?: number;
+    position?: Vec3;
+    pointer: Vec2;
+    camera: Camera;
+    domElement: HTMLElement;
+    keys: KeysPressed;
+    ref: any;
+};
+export type EventEmitterCallback = (event: EventEmitterCallbackEvent) => void;
+export type Listener = {
+    object: Object3D;
+    ref?: any;
+    threshold?: number;
+    handlers: Record<string, EventEmitterCallback>;
+};
+export type Emitter = {
+    source: Object3D;
+    depth: number;
+    listener: number;
+    instanced: boolean;
+    instanceCount: number;
+    threshold: number;
+};
+export type ObjectMapEntry = {
+    emitter: number;
+    index: number;
+};
+export type EventEmitterContextProps = {
+    register: (listener: Listener) => () => void;
+    update: () => void;
+};
+/**
+ * Context for registering event handlers to the `EventEmitter`
+ *
+ * @see {@link EventEmitter}
+ *
+ * @group Contexts
+ */
+export declare const EventEmitterContext: import('react').Context<EventEmitterContextProps>;
+/**
+ * Used to register event handlers for renderable components.
+ *
+ * @example
+ * const eventHandler = useEventEmitter()
+ *
+ * @remarks
+ * The generator is an async function that process and returns data required
+ * by your components, such as geometry for a mesh.
+ *
+ * An optional threshold value may be provided in the register method. This is used
+ * to weight the distance when performing GPU picking, making objects with a
+ * higher threshold more likely to be hit. This is usually used for thin/small objects,
+ * which may otherwise be hard to hit.
+ * @example
+ *
+ * useEffect(() => {
+ *   let unregister: (() => void) | null = null
+ *   if (eventHandler && ref.current) {
+ *     const handlers: Record<string, EventEmitterCallback> = {}
+ *
+ *     if (onPointerClick) handlers.click = onPointerClick
+ *     if (onPointerEnter) handlers.enter = onPointerEnter
+ *     if (onPointerLeave) handlers.leave = onPointerLeave
+ *     if (onPointerMove) handlers.move = onPointerMove
+ *
+ *     if (Object.keys(handlers).length) {
+ *       unregister = eventHandler.register(ref.current, handlers, id)
+ *     }
+ *   }
+ *
+ *   return () => {
+ *     if (unregister) unregister()
+ *   }
+ * }, [eventHandler, onPointerClick, onPointerEnter, onPointerLeave, onPointerMove])
+ *
+ * @see {@link EventEmitter}
+ *
+ * @group Hooks
+ */
+export declare const useEventEmitter: () => EventEmitterContextProps;

package/dist/types/components/EventEmitter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EventEmitter';
+export * from './EventEmitterContext';
+export * from './picking-helper';

package/dist/types/components/EventEmitter/picking-helper.d.ts

@@ -0,0 +1,32 @@
+import { PerspectiveCamera, Scene, Vector2, WebGLRenderer } from 'three';
+import { Vec2, Vec3 } from '../../sdk';
+import { Emitter, Listener } from './EventEmitterContext';
+export type PickedObject = {
+    emitter: Emitter;
+    index: number;
+};
+export type PickResult = {
+    match: PickedObject | null;
+    position: Vec3;
+    point: Vec2;
+};
+/**
+ * Used internally by the `EventEmitter` component
+ * @internal
+ */
+export declare class PickingHelper {
+    private _size;
+    private _radius;
+    private _pbo;
+    private _buffer;
+    private _material;
+    constructor(options?: {});
+    private traverseObject;
+    updateListeners: () => void;
+    addListener: (listener: Listener) => void;
+    getListener: (id: number) => Listener | undefined;
+    removeListener: (id: number) => void;
+    render(pointer: Vector2, renderer: WebGLRenderer, scene: Scene, camera: PerspectiveCamera): Promise<PickResult>;
+    private pick;
+    dispose(): void;
+}

package/dist/types/components/EventEmitter/picking-material.d.ts

@@ -0,0 +1,11 @@
+import { Camera, Object3D, Scene, ShaderMaterial, WebGLRenderer } from 'three';
+import { BufferGeometry } from 'three/webgpu';
+import { Emitter, Listener } from './EventEmitterContext';
+export declare class PickingMaterial extends ShaderMaterial {
+    listeners: Map<number, Listener>;
+    emitters: Map<number, Emitter>;
+    currentObjectMap: Array<number> | null;
+    constructor();
+    dispose(): void;
+    onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, _camera: Camera, _geometry: BufferGeometry, object: Object3D): void;
+}

package/dist/types/components/Grids/BoxGrid/BoxGrid.d.ts

@@ -0,0 +1,52 @@
+import { PropsWithChildren } from 'react';
+import { Color } from 'three';
+import { CommonComponentProps } from '../../../common/types';
+import { Vec3 } from '../../../sdk/types/common';
+import { BoxPadding } from '../../ObservableGroup/ObservableGroup';
+/**
+ * BoxGrid props
+ * @expand
+ */
+export type BoxGridProps = CommonComponentProps & {
+    size?: Vec3;
+    cellSize?: number;
+    subDivisions?: number;
+    gridScale?: Vec3;
+    gridOrigin?: Vec3;
+    originValue?: Vec3;
+    gridLineWidth?: number;
+    background?: string | Color | number;
+    backgroundOpacity?: number;
+    opacity?: number;
+    gridColorMajor?: string | number | Color;
+    gridColorMinor?: string | number | Color;
+    axesColor?: string | number | Color;
+    axesLineWidth?: number;
+    axesTickSize?: number;
+    enableProjection?: boolean;
+    projectionColor?: string | number | Color;
+    projectionResolution?: number;
+    projectionRefreshRate?: number;
+    showRulers?: boolean;
+    autoSize?: boolean;
+    autoSizePadding?: number | Vec3 | BoxPadding;
+    autoSizeUpdateRate?: number;
+};
+/**
+ * Renders 5 grid planes in a box form (bottom and sides). See `Grid` for more info.
+ *
+ * @example
+ * <BoxGrid
+ *   size={[5000, 2000, 5000]}
+ *   cellSize={100}
+ *   gridLineWidth={0.01}
+ *   axesColor="#eee"
+ *   opacity={0.8}
+ * />
+ *
+ * @see [Storybook](/videx-3d/?path=/docs/components-grids-boxgrid--docs)
+ * @see {@link Grid}
+ *
+ * @group Components
+ */
+export declare const BoxGrid: ({ name, visible, castShadow, receiveShadow, layers, renderOrder, userData, size, cellSize, gridScale, gridOrigin, originValue, subDivisions, position, gridLineWidth, background, backgroundOpacity, opacity, gridColorMajor, gridColorMinor, axesColor, axesLineWidth, axesTickSize, enableProjection, projectionColor, projectionResolution, projectionRefreshRate, showRulers, autoSize, autoSizePadding, autoSizeUpdateRate, children, }: PropsWithChildren<BoxGridProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Grids/Grid/Grid.d.ts

@@ -0,0 +1,62 @@
+import { Color, Texture } from 'three';
+import { CommonComponentProps } from '../../../common/types';
+import { Vec2 } from '../../../sdk/types/common';
+/**
+ * Grid props
+ * @expand
+ */
+export type GridProps = CommonComponentProps & {
+    plane: 'xz' | 'xy' | 'zy';
+    size: Vec2;
+    cellSize?: number;
+    subDivisions?: number;
+    gridOrigin?: Vec2;
+    gridScale?: Vec2;
+    background?: string | Color | number;
+    backgroundOpacity?: number;
+    opacity?: number;
+    gridColorMajor?: string | number | Color;
+    gridColorMinor?: string | number | Color;
+    gridLineWidth?: number;
+    showAxes?: boolean;
+    showAxesLabels?: boolean;
+    trimAxesLabels?: boolean;
+    axesOffset?: Vec2;
+    axesColor?: string | number | Color;
+    axesLineWidth?: number;
+    axesTickSize?: number;
+    originValue?: Vec2;
+    radial?: boolean;
+    dynamicSegments?: boolean;
+    showRulers?: boolean;
+    rulerColor?: string | number | Color;
+    rulerLineWidth?: number;
+    rulerOpacity?: number;
+    planeOffset?: number;
+    dynamicCellSize?: boolean;
+    cellSizeDistanceFactors?: number[][];
+    side?: 'front' | 'back' | 'both';
+    texture?: Texture;
+    textureMix?: number;
+    enableProjection?: boolean;
+    projectionDistance?: number;
+    projectionColor?: string | number | Color;
+    projectionResolution?: number;
+    projectionRefreshRate?: number;
+    onRulerUpdate?: ((coords: Vec2 | null) => void) | null;
+};
+/**
+ * Renders an axis aligned grid plane (xz, xy or zy).
+ *
+ * @example
+ * <Grid plane="xz" size={[1000, 1000]} cellSize={10} />
+ *
+ * @remarks
+ * The Grid component is very flexible and has many different options which allows you
+ * to customize both behaviours and appearances. See the storybook linked below for examples.
+ *
+ * @see [Storybook](/videx-3d/?path=/docs/components-grids-grid--docs)
+ *
+ * @group Components
+ */
+export declare const Grid: ({ plane, size, position, gridOrigin, gridScale, cellSize, subDivisions, background, backgroundOpacity, opacity, gridColorMajor, gridColorMinor, gridLineWidth, showAxes, showAxesLabels, trimAxesLabels, axesOffset, axesColor, axesLineWidth, axesTickSize, originValue, radial, dynamicSegments, showRulers, rulerColor, rulerLineWidth, rulerOpacity, planeOffset, dynamicCellSize, cellSizeDistanceFactors, side, onRulerUpdate, texture, textureMix, enableProjection, projectionDistance, projectionColor, projectionResolution, projectionRefreshRate, name, userData, renderOrder, visible, castShadow, receiveShadow, layers, }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Grids/Grid/GridAxesLabels.d.ts

@@ -0,0 +1,24 @@
+import { Color } from 'three';
+import { Vec2 } from '../../../sdk/types/common';
+export type GridAxesLabelsProps = {
+    scale: Vec2;
+    units: number;
+    start: Vec2;
+    originOffset: Vec2;
+    size: Vec2;
+    axesTickSize: number;
+    plane: 'xz' | 'xy' | 'zy';
+    color?: string | number | Color;
+    side?: 'front' | 'back' | 'both';
+    axesOffset: Vec2;
+    trimAxesLabels: boolean;
+    renderOrder?: number;
+};
+/**
+ * Adds grid axes and labels to a `Grid` component. Used internally by the `Grid` component.
+ *
+ * @internal
+ *
+ * @group Components
+ */
+export declare const GridAxesLabels: ({ scale, start, size, units, originOffset, axesOffset, axesTickSize, plane, color, side, trimAxesLabels, renderOrder, }: GridAxesLabelsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Grids/Grid/UtmGrid.d.ts

@@ -0,0 +1,30 @@
+import { GridProps } from './Grid';
+/**
+ * UtmGrid props
+ * @expand
+ */
+export type UtmGridProps = GridProps & {
+    relativeValues?: boolean;
+};
+/**
+ * A convenience component for setting up a Grid component with Utm coordinates.
+ *
+ * @example
+ * <UtmGrid
+ *   size={[30000, 30000]}
+ *   cellSize={1000}
+ *   subDivisions={5}
+ *   gridLineWidth={0.015}
+ *   opacity={0.9}
+ *   showAxes
+ *   showRulers
+ * />
+ *
+ * @remarks
+ * This component needs to be a child of the `UtmArea` component in order to work.
+ *
+ * @see {@link Grid}
+ *
+ * @group Components
+ */
+export declare const UtmGrid: (props: UtmGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Grids/Grid/grid-helpers.d.ts

@@ -0,0 +1,2 @@
+import { Vec2 } from '../../../sdk';
+export declare const getGridPositionFromUV: (uvX: number, uvY: number, size: Vec2, gridScale: Vec2, originOffset: Vec2) => Vec2 | null;

package/dist/types/components/Grids/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Grid/Grid';
+export * from './Grid/UtmGrid';
+export * from './Grid/GridAxesLabels';
+export * from './Grid/grid-helpers';
+export * from './BoxGrid/BoxGrid';

package/dist/types/components/Highlighter/Highlighter.d.ts

@@ -0,0 +1,23 @@
+import { Blending, Color } from 'three';
+export type HighlighterProps = {
+    color?: string | number | Color;
+    blending?: Blending;
+    renderOrder?: number;
+};
+/**
+ * Adds highlighting to rendered objects by rendering a "ghost" object on top it.
+ *
+ * @example
+ * <Highlighter />
+ *
+ * @remarks
+ * This component manages highlights in a global state and needs to be added to
+ * enable it as a feature. To interact with this component, you must use the
+ * `useHighlighter` hook from another component.
+ *
+ * @see {@link useHighlighter}
+ * @see {@link EventEmitter}
+ *
+ * @group Components
+ */
+export declare const Highlighter: ({ color, blending, renderOrder, }: HighlighterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Highlighter/highlight-state.d.ts

@@ -0,0 +1,43 @@
+import { Line, Mesh, Object3D } from 'three';
+type ObjectRef = {
+    object: Mesh | Line;
+    instanceIndex?: number;
+};
+type HighlightState = {
+    highlighted: ObjectRef[];
+    set: (partial: ((state: HighlightState) => Partial<HighlightState>) | Partial<HighlightState>) => void;
+};
+export declare const useHighlightState: import('zustand').UseBoundStore<import('zustand').StoreApi<HighlightState>>;
+/**
+ * Allows a component to interact with the `Highlighter` handler component.
+ *
+ * @example
+ * const highlighter = useHighlighter()
+ *
+ * return (
+ *   <Wellbore
+ *     id={wellbore.id}
+ *    ...
+ *    onPointerEnter={async (event) => {
+ *      if (!isSelected) {
+ *        highlighter.highlight(event.target)
+ *      }
+ *    }}
+ *    onPointerLeave={async () => {
+ *      highlighter.removeAll()
+ *    }}
+ *    ...
+ *  />
+ * )
+ *
+ * @see {@link EventEmitter}
+ * @see {@link Highlighter}
+ *
+ * @group Hooks
+ */
+export declare const useHighlighter: () => {
+    highlight: (obj: Object3D, index?: number) => void;
+    removeHighlight: (obj: Object3D, index?: number) => void;
+    removeAll: () => void;
+};
+export {};

package/dist/types/components/Highlighter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Highlighter';
+export { useHighlighter } from './highlight-state';

package/dist/types/components/Html/DepthSelector.d.ts

@@ -0,0 +1 @@
+export declare const DepthSelector: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Html/OutputPanel/OutputPanel.d.ts

@@ -0,0 +1,10 @@
+import { PanelProps } from '../Panel/Panel';
+/**
+ * The `OutputPanel` is mainly intended as an example of the `Panel` component.
+ * It is used in storybooks as a debug/info panel. Not recommended to use for production.
+ * @see {@link useOutputPanel}
+ * @see {@link Panel}
+ * @internal
+ * @group Components
+ */
+export declare const OutputPanel: (panelProps: PanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Html/OutputPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OutputPanel';
+export * from './output-panel-state';

package/dist/types/components/Html/OutputPanel/output-panel-state.d.ts

@@ -0,0 +1,38 @@
+export type OutputPanelDetails = Record<string, {
+    label: string;
+    value: string | number;
+}>;
+export type OutputPanelGroup = {
+    label: string;
+    value?: string | number;
+    details?: OutputPanelDetails;
+    color?: string;
+    order?: number;
+};
+export type OutputPanelState = {
+    groups: Record<string, OutputPanelGroup>;
+    set: (partial: ((state: OutputPanelState) => Partial<OutputPanelState>) | Partial<OutputPanelState>) => void;
+    has: (id: string) => boolean;
+};
+/**
+ * Global state for `OutputPanel`
+ * @see {@link useOutputPanel}
+ * @internal
+ * @group Hooks
+ */
+export declare const useOutputPanelState: import('zustand').UseBoundStore<import('zustand').StoreApi<OutputPanelState>>;
+/**
+ * Allow interaction with the `OutputPanel` component.
+ * The `OutputPanel` is mainly used as an example of the `Panel` component.
+ * It is used in storybooks as a debug/info panel. Not recommended to use for production.
+ * @see {@link OutputPanel}
+ * @internal
+ * @group Hooks
+ */
+export declare const useOutputPanel: () => {
+    add: (id: string, group: OutputPanelGroup) => void;
+    remove: (id: string) => void;
+    removeAll: () => void;
+    update: (id: string, value: string | number, details?: Record<string, string | number> | null) => void;
+    has: (id: string) => boolean;
+};

package/dist/types/components/Html/Panel/Panel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Panel props
+ * @expand
+ */
+export type PanelProps = {
+    width?: number;
+    height?: number;
+    offset?: [number, number];
+    opacity?: number;
+    padding?: number;
+    origin?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/**
+ * A simple HTML panel that can be used as an overlay on the 3d canvas.
+ * @see {@link OutputPanel}
+ * @group Components
+ */
+export declare const Panel: import('react').ForwardRefExoticComponent<PanelProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Html/WellMap/ActiveTrack.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    wellboreId: string;
+    color?: string;
+    opacity?: number;
+    width?: number;
+    dashed?: boolean;
+};
+export declare const ActiveTrack: ({ wellboreId, opacity, width, dashed, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/Html/WellMap/DepthCursor.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    depth: number;
+    setDepth?: (depth: number) => void;
+    ruler?: boolean;
+    rulerWidth?: number;
+};
+export declare const DepthCursor: ({ depth, setDepth, ruler, rulerWidth, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Html/WellMap/DepthReadout.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    depth: number;
+    color: string;
+};
+export declare const DepthReadout: ({ depth, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Html/WellMap/Schematic.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { WellboreHeader } from '../../../sdk';
+type Props = {
+    selected?: string;
+    color?: string;
+    setSelected?: (wellbore: string, depth: number) => void;
+    depth?: number;
+    setDepth?: (depth: number) => void;
+    onWellboreOver?: (wellbore: WellboreHeader | null, depth: number | undefined) => void;
+    colorMap?: Record<string, string>;
+    interactive?: boolean;
+    depthCursor?: boolean;
+};
+export declare const Schematic: ({ selected, setSelected, depth, setDepth, onWellboreOver, color, colorMap, interactive, depthCursor, children, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Html/WellMap/Track.d.ts

@@ -0,0 +1,13 @@
+import { WellboreHeader } from '../../../sdk';
+type Props = {
+    wellboreId: string;
+    slot: number;
+    isSelected: boolean;
+    setSelected?: (wellbore: string, depth: number) => void;
+    setDepth?: (depth: number) => void;
+    onWellboreOver?: (wellbore: WellboreHeader | null, depth: number | undefined) => void;
+    interactive: boolean;
+    color?: string;
+};
+export declare const Track: ({ wellboreId, slot, isSelected, setSelected, setDepth, onWellboreOver, interactive, color, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};