@kystverket/styrbord-kart 0.0.7 → 0.0.9

package/README.md

@@ -10,8 +10,8 @@ Komponentene er laget for å passe sammen med `@kystverket/styrbord`.
 
 Biblioteket eksporterer blant annet:
 
-- `CoordinateDirectionPicker`
-- `CoordinatePicker`
+- `CoordinateDirectionField`
+- `CoordinateField`
 - `GeoJsonViewer`
 - `GeoJsonEditor`
 - `GeoJsonAnnotater`
@@ -31,24 +31,28 @@ I tillegg eksporteres hooks, context-providers og hjelpefunksjoner for lagoppset
 Det holder å importere CSS globalt en gang.
 
 ```js
-import '@kystverket/styrbord/style.css';
-import '@kystverket/styrbord-kart/style.css';
+import "@kystverket/styrbord/style.css";
+import "@kystverket/styrbord-kart/style.css";
 ```
 
 Importering av enkeltkomponenter.
 
 ```js
-import { GeoJsonViewer, GeoJsonEditor, CoordinatePicker } from '@kystverket/styrbord-kart';
+import {
+  GeoJsonViewer,
+  GeoJsonEditor,
+  CoordinateField,
+} from "@kystverket/styrbord-kart";
 ```
 
 Et enkelt eksempel med visning av GeoJSON.
 
 ```tsx
-import type { FeatureCollection } from 'geojson';
-import { GeoJsonViewer } from '@kystverket/styrbord-kart';
+import type { FeatureCollection } from "geojson";
+import { GeoJsonViewer } from "@kystverket/styrbord-kart";
 
 const data: FeatureCollection = {
-  type: 'FeatureCollection',
+  type: "FeatureCollection",
   features: [],
 };
 

package/dist/src/components/CoordinateDirectionField/CoordinateDirectionField.d.ts

@@ -0,0 +1,9 @@
+import type { CoordinateDirectionFieldProps } from "./CoordinateDirectionField.types";
+/**
+ * CoordinateDirectionField — select a geographic coordinate and a facing
+ * direction (0–360°) via an interactive map or manual input fields.
+ *
+ * Internally delegates to GeoJsonEditor in single-feature directional-point mode.
+ */
+export declare function CoordinateDirectionField({ value, onChange, error, disabled, className, height, showCenterAction, }: CoordinateDirectionFieldProps): React.JSX.Element;
+export default CoordinateDirectionField;

package/dist/src/components/{CoordinateDirectionPicker/CoordinateDirectionPicker.stories.d.ts → CoordinateDirectionField/CoordinateDirectionField.stories.d.ts}

@@ -1,12 +1,18 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { CoordinateDirectionPicker } from "./CoordinateDirectionPicker";
+import { CoordinateDirectionField } from "./CoordinateDirectionField";
 declare const meta: {
     title: string;
-    component: typeof CoordinateDirectionPicker;
+    component: typeof CoordinateDirectionField;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn) => React.JSX.Element)[];
     tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
     };
 };
 export default meta;

package/dist/src/components/{CoordinateDirectionPicker/CoordinateDirectionPicker.types.d.ts → CoordinateDirectionField/CoordinateDirectionField.types.d.ts}

@@ -15,9 +15,9 @@ export type CoordinateDirectionGeoJSON = CoordinateGeoJSON & {
         direction: number;
     };
 };
-export interface CoordinateDirectionPickerProps extends MapPickerBaseProps {
+export interface CoordinateDirectionFieldProps extends MapPickerBaseProps {
     /** Controlled value. */
-    value?: CoordinateDirectionGeoJSON;
+    value: CoordinateDirectionGeoJSON | undefined;
     /** Called when the user changes the coordinate or direction. */
-    onChange?: (value: CoordinateDirectionGeoJSON) => void;
+    onChange: (value: CoordinateDirectionGeoJSON) => void;
 }

package/dist/src/components/CoordinateField/CoordinateField.d.ts

@@ -0,0 +1,9 @@
+import type { CoordinateFieldProps } from "./CoordinateField.types";
+/**
+ * CoordinateField — select a geographic coordinate via an interactive map
+ * or manual input fields.
+ *
+ * Internally delegates to GeoJsonEditor in single-feature point mode.
+ */
+export declare function CoordinateField({ value, onChange, error, disabled, className, height, showCenterAction, }: CoordinateFieldProps): React.JSX.Element;
+export default CoordinateField;

package/dist/src/components/{CoordinatePicker/CoordinatePicker.stories.d.ts → CoordinateField/CoordinateField.stories.d.ts}

@@ -1,12 +1,18 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { CoordinatePicker } from "./CoordinatePicker";
+import { CoordinateField } from "./CoordinateField";
 declare const meta: {
     title: string;
-    component: typeof CoordinatePicker;
+    component: typeof CoordinateField;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn) => React.JSX.Element)[];
     tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
     };
 };
 export default meta;

package/dist/src/components/{CoordinatePicker/CoordinatePicker.types.d.ts → CoordinateField/CoordinateField.types.d.ts}

@@ -1,8 +1,8 @@
 import type { CoordinateGeoJSON } from "~/utility/types";
 import type { MapPickerBaseProps } from "~/components/shared/MapPicker.types";
-export interface CoordinatePickerProps extends MapPickerBaseProps {
+export interface CoordinateFieldProps extends MapPickerBaseProps {
     /** Controlled value — a GeoJSON Point Feature. */
-    value?: CoordinateGeoJSON;
+    value: CoordinateGeoJSON | undefined;
     /** Called when the user places or changes the coordinate. */
-    onChange?: (value: CoordinateGeoJSON) => void;
+    onChange: (value: CoordinateGeoJSON) => void;
 }

package/dist/src/components/GeoJsonEditor/GeoJsonEditor.d.ts

@@ -5,6 +5,9 @@ import type { GeoJsonEditorProps } from "./GeoJsonEditor.types";
  *
  * Uses terra-draw for interactive drawing and editing. Emits the full
  * FeatureCollection via `onChange` on every change.
+ *
+ * Supports feature hover (with customizable content per type) and selection
+ * callbacks when using terra-draw's select mode.
  */
-export declare function GeoJsonEditor({ value, onChange, modes, editable, deletable, fitBounds, fitBoundsPadding, showLayerToggle, height, className, disabled, }: GeoJsonEditorProps): React.JSX.Element;
+export declare function GeoJsonEditor({ value, onChange, modes, editable, deletable, fitBounds, fitBoundsPadding, showLayerToggle, height, className, disabled, hoverable, onHover, onSelect, hoverContent, onCoordinateClick, showCenterAction, singleFeature, }: GeoJsonEditorProps): React.JSX.Element;
 export default GeoJsonEditor;

package/dist/src/components/GeoJsonEditor/GeoJsonEditor.stories.d.ts

@@ -7,16 +7,52 @@ declare const meta: {
     tags: string[];
     parameters: {
         layout: string;
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
+/**
+ * The default state: an empty map with all drawing tools available.
+ * Use the toolbar to draw points, lines, and polygons.
+ */
 export declare const Default: Story;
+/**
+ * The editor pre-loaded with a FeatureCollection containing a polygon (Ålesund
+ * Havn), a point (Kråkenes Fyr) and a linestring (Hovedled Sør–Nord).
+ * `fitBounds` zooms the map to fit all features on mount.
+ */
 export declare const WithInitialData: Story;
+export declare const Controlled: Story;
+/** Only the point tool is available in the toolbar. */
 export declare const PointsOnly: Story;
+/** Only the linestring tool is available in the toolbar. */
 export declare const LinesOnly: Story;
+/** Only the polygon tool is available in the toolbar. */
 export declare const PolygonsOnly: Story;
-export declare const Disabled: Story;
-export declare const TallMap: Story;
-export declare const Controlled: Story;
+/**
+ * Only directional-point mode. Each placed point stores a `direction` angle
+ * (0–360°) that can be used to represent headings, bearings, etc.
+ */
+export declare const DirectionalPointsOnly: Story;
+export declare const DirectionalControlled: Story;
+/**
+ * `disabled` removes the toolbar and all interaction. Use this to display
+ * GeoJSON data without allowing any edits.
+ */
+export declare const ReadOnly: Story;
+export declare const WithHoverContent: Story;
+/**
+ * Shows the built-in layer toggle control. Requires the full layer context
+ * stack (`ViewBoundsProvider`, `BaseLayersProvider`, etc.).
+ */
 export declare const WithLayerToggle: Story;
+export declare const SingleFeaturePoint: Story;
+export declare const SingleFeatureDirectionalPoint: Story;
+/** `singleFeature` with `polygon` mode — only one polygon at a time. */
+export declare const SingleFeaturePolygon: Story;

package/dist/src/components/GeoJsonEditor/GeoJsonEditor.types.d.ts

@@ -1,7 +1,11 @@
 import type { Feature, FeatureCollection, GeoJsonProperties, Geometry } from "geojson";
+import type { ReactNode } from "react";
+import type maplibregl from "maplibre-gl";
 import type { MapBaseProps } from "../shared/MapPicker.types";
+import type { InteractiveFeature } from "~/hooks/useFeatureInteraction";
+import type { CoordinateClickResult } from "~/utility/wmsGetFeatureInfo";
 /** Drawing modes available in the editor toolbar. */
-export type DrawMode = "point" | "linestring" | "polygon";
+export type DrawMode = "point" | "linestring" | "polygon" | "directional-point";
 export interface GeoJsonEditorProps extends MapBaseProps {
     /** Current GeoJSON value (controlled). Accepts a Feature or FeatureCollection. */
     value?: Feature<Geometry, GeoJsonProperties> | FeatureCollection<Geometry, GeoJsonProperties>;
@@ -25,4 +29,44 @@ export interface GeoJsonEditorProps extends MapBaseProps {
     fitBoundsPadding?: number;
     /** Whether to show the layer toggle control on the map. Defaults to `false`. */
     showLayerToggle?: boolean;
+    /**
+     * Whether features can be hovered to show tooltips. Defaults to `true`.
+     */
+    hoverable?: boolean;
+    /**
+     * Called when the hovered feature changes.
+     * Receives the feature and the original mouse event, or null when hover ends.
+     */
+    onHover?: (feature: InteractiveFeature | null, event: maplibregl.MapMouseEvent | null) => void;
+    /**
+     * Called when the selection changes (via click or terra-draw selection).
+     * Receives array of selected features, or null when selection is cleared.
+     */
+    onSelect?: (features: InteractiveFeature[] | null) => void;
+    /**
+     * Custom render functions for hover content based on the feature's `type` property.
+     * Keys are the `properties.type` values; the function receives the hovered feature
+     * and returns the content to display in the hover popup.
+     *
+     * If a feature's type is not in this map, the default content (type name) is shown.
+     */
+    hoverContent?: Record<string, (feature: InteractiveFeature) => ReactNode>;
+    /**
+     * Called when the user clicks on the map (while not actively drawing).
+     * The result includes the clicked coordinate and WMS GetFeatureInfo
+     * results for all visible WMS catalog layers.
+     */
+    onCoordinateClick?: (result: CoordinateClickResult) => void;
+    /**
+     * When `true`, only one feature can exist at a time. The feature type is
+     * determined by `modes[0]` (which should contain exactly one mode).
+     *
+     * - The toolbar is hidden and drawing mode is auto-activated.
+     * - Placing a new feature automatically replaces the existing one.
+     *
+     * This allows GeoJsonEditor to be used as a drop-in replacement for
+     * `CoordinateField` (with `modes: ['point']`) or
+     * `CoordinateDirectionField` (with `modes: ['directional-point']`).
+     */
+    singleFeature?: boolean;
 }

package/dist/src/components/GeoJsonEditor/useDirectionalPoints.d.ts

@@ -0,0 +1,38 @@
+import type { MutableRefObject } from "react";
+import type { Map as MaplibreMap } from "maplibre-gl";
+import type { Feature, Point } from "geojson";
+export interface DirectionalPointFeature extends Feature<Point> {
+    properties: {
+        id: string;
+        direction: number;
+        mode: "directional-point";
+        [key: string]: unknown;
+    };
+}
+export interface UseDirectionalPointsOptions {
+    mapRef: MutableRefObject<MaplibreMap | null>;
+    /** Must be `true` before the click handler is installed (set by `useMaplibreMap`). */
+    mapReady: boolean;
+    disabled: boolean;
+    /** Current active editor mode — the hook only places points when this is 'directional-point'. */
+    activeMode: string;
+    /** When true, only one directional point is allowed — new points replace existing ones. */
+    singleFeature?: boolean;
+    onChange?: () => void;
+    onSelect?: (feature: DirectionalPointFeature | null) => void;
+}
+export interface UseDirectionalPointsResult {
+    /** Whether a directional point is currently selected. */
+    hasSelection: boolean;
+    /** Delete the currently selected directional point. */
+    deleteSelected: () => void;
+    /** Get all directional-point features for merging into the emitted FeatureCollection. */
+    getFeatures: () => DirectionalPointFeature[];
+    /** Load initial directional-point features (called once on mount). */
+    loadFeatures: (features: DirectionalPointFeature[]) => void;
+    /** Replace all directional-point features (clears existing markers before loading). */
+    replaceFeatures: (features: DirectionalPointFeature[]) => void;
+    /** Deselect any selected directional point. */
+    deselect: () => void;
+}
+export declare function useDirectionalPoints({ mapRef, mapReady, disabled, activeMode, singleFeature, onChange, onSelect, }: UseDirectionalPointsOptions): UseDirectionalPointsResult;

package/dist/src/components/GeoJsonEditor/useTerraDraw.d.ts

@@ -1,19 +1,37 @@
 import type { MutableRefObject } from "react";
 import type { Map as MaplibreMap } from "maplibre-gl";
-import type { FeatureCollection } from "geojson";
+import type { FeatureCollection, Feature, Geometry, GeoJsonProperties } from "geojson";
 import type { DrawMode } from "./GeoJsonEditor.types";
+/** Drawing modes that terra-draw handles natively. */
+type TerraDrawableMode = Exclude<DrawMode, "directional-point">;
 export interface UseTerraDrawOptions {
     mapRef: MutableRefObject<MaplibreMap | null>;
-    modes: DrawMode[];
+    /** Must be `true` before terra-draw will initialise (set by `useMaplibreMap`). */
+    mapReady: boolean;
+    modes: TerraDrawableMode[];
     editable: boolean;
     deletable: boolean;
     disabled: boolean;
+    /** When true, only one feature is allowed — new features replace existing ones. */
+    singleFeature?: boolean;
     onChange?: (data: FeatureCollection) => void;
+    /**
+     * Called when selection changes (features selected or deselected).
+     * Receives array of selected features, or null when selection is cleared.
+     */
+    onSelect?: (features: Feature<Geometry, GeoJsonProperties>[] | null) => void;
 }
 export interface UseTerraDrawResult {
     activeMode: string;
     setActiveMode: (mode: string) => void;
     deleteSelected: () => void;
     hasSelection: boolean;
+    /** Currently selected features. */
+    selectedFeatures: Feature<Geometry, GeoJsonProperties>[];
+    /** Get the current snapshot of all features. */
+    getSnapshot: () => Feature<Geometry, GeoJsonProperties>[];
+    /** True once terra-draw has been initialised and is ready to accept features. */
+    isReady: boolean;
 }
-export declare function useTerraDraw({ mapRef, modes, editable, deletable, disabled, onChange, }: UseTerraDrawOptions): UseTerraDrawResult;
+export declare function useTerraDraw({ mapRef, mapReady, modes, editable, deletable, disabled, singleFeature, onChange, onSelect, }: UseTerraDrawOptions): UseTerraDrawResult;
+export {};

package/dist/src/components/GeoJsonViewer/GeoJsonViewer.d.ts

@@ -4,6 +4,9 @@ import type { GeoJsonViewerProps } from "./GeoJsonViewer.types";
  *
  * Renders Point, LineString, Polygon (and their Multi-variants) using
  * MapLibre GL layers. The map auto-fits to the data bounds by default.
+ *
+ * Supports feature hover (with customizable content per type) and selection
+ * (single or multi-select with Ctrl/Cmd).
  */
-export declare function GeoJsonViewer({ data, fitBounds, fitBoundsPadding, geoJsonStyle: styleProp, showLayerToggle, height, className, disabled, }: GeoJsonViewerProps): React.JSX.Element;
+export declare function GeoJsonViewer({ data, fitBounds, fitBoundsPadding, geoJsonStyle: styleProp, showLayerToggle, height, className, disabled, hoverable, selectable, onHover, onSelect, hoverContent, onCoordinateClick, showCenterAction, }: GeoJsonViewerProps): React.JSX.Element;
 export default GeoJsonViewer;

package/dist/src/components/GeoJsonViewer/GeoJsonViewer.stories.d.ts

@@ -18,3 +18,8 @@ export declare const CustomStyle: Story;
 export declare const TallMap: Story;
 export declare const ComplexMultiType: Story;
 export declare const WithLayerToggle: Story;
+export declare const Interactive: Story;
+export declare const SelectionDemo: Story;
+export declare const HoverOnly: Story;
+export declare const NonInteractive: Story;
+export declare const CoordinateClick: Story;

package/dist/src/components/GeoJsonViewer/GeoJsonViewer.types.d.ts

@@ -1,5 +1,9 @@
 import type { Feature, FeatureCollection, GeoJsonProperties, Geometry } from "geojson";
+import type { ReactNode } from "react";
+import type maplibregl from "maplibre-gl";
 import { MapBaseProps } from "../shared/MapPicker.types";
+import type { InteractiveFeature } from "~/hooks/useFeatureInteraction";
+import type { CoordinateClickResult } from "~/utility/wmsGetFeatureInfo";
 /**
  * Styling options for the GeoJSON layers rendered on the map.
  */
@@ -35,4 +39,35 @@ export interface GeoJsonViewerProps extends MapBaseProps {
     className?: string;
     /** Whether to show the layer toggle control on the map. Defaults to `false`. */
     showLayerToggle?: boolean;
+    /**
+     * Whether features can be hovered to show tooltips. Defaults to `true`.
+     */
+    hoverable?: boolean;
+    /**
+     * Whether features can be clicked to select them. Defaults to `true`.
+     */
+    selectable?: boolean;
+    /**
+     * Called when the hovered feature changes.
+     * Receives the feature and the original mouse event, or null when hover ends.
+     */
+    onHover?: (feature: InteractiveFeature | null, event: maplibregl.MapMouseEvent | null) => void;
+    /**
+     * Called when the selection changes.
+     * Receives array of selected features, or null when selection is cleared.
+     */
+    onSelect?: (features: InteractiveFeature[] | null) => void;
+    /**
+     * Custom render functions for hover content based on the feature's `type` property.
+     * Keys are the `properties.type` values; the function receives the hovered feature
+     * and returns the content to display in the hover popup.
+     *
+     * If a feature's type is not in this map, the default content (type name) is shown.
+     */
+    hoverContent?: Record<string, (feature: InteractiveFeature) => ReactNode>;
+    /**
+     * Called when the user clicks on the map. The result includes the clicked
+     * coordinate and WMS GetFeatureInfo results for all visible WMS catalog layers.
+     */
+    onCoordinateClick?: (result: CoordinateClickResult) => void;
 }

package/dist/src/components/GeoJsonViewer/GeoJsonViewer.utils.d.ts

@@ -8,6 +8,17 @@ export declare const LINE_LAYER = "geojson-line";
 export declare const POINT_STROKE_LAYER = "geojson-point-stroke";
 export declare const POINT_LAYER = "geojson-point";
 export declare const ALL_LAYERS: string[];
+export declare const HOVER_FILL_LAYER = "geojson-hover-fill";
+export declare const HOVER_LINE_LAYER = "geojson-hover-line";
+export declare const HOVER_POINT_LAYER = "geojson-hover-point";
+export declare const SELECTED_FILL_LAYER = "geojson-selected-fill";
+export declare const SELECTED_LINE_LAYER = "geojson-selected-line";
+export declare const SELECTED_POINT_LAYER = "geojson-selected-point";
+export declare const HIGHLIGHT_LAYERS: string[];
+export declare const INTERACTIVE_LAYERS: string[];
+export declare const HOVER_COLOR = "rgba(0, 98, 186, 0.4)";
+export declare const SELECTED_COLOR = "#0062ba";
+export declare const SELECTED_GLOW_COLOR = "rgba(0, 98, 186, 0.5)";
 /**
  * Normalise a Feature or FeatureCollection into a **clean** FeatureCollection.
  *
@@ -18,3 +29,18 @@ export declare const ALL_LAYERS: string[];
 export declare function toFeatureCollection(data: GeoJsonViewerProps["data"]): FeatureCollection;
 /** Remove all GeoJSON layers and the source from the map, ignoring errors. */
 export declare function removeLayers(map: maplibregl.Map): void;
+/**
+ * Add highlight layers for hover and selection effects.
+ * These layers use filters to show only specific features.
+ */
+export declare function addHighlightLayers(map: maplibregl.Map, style: Required<GeoJsonStyle>): void;
+/**
+ * Update the filter on hover highlight layers to show only the specified feature.
+ * Pass null to hide all hover highlights.
+ */
+export declare function updateHoverHighlight(map: maplibregl.Map, featureId: string | number | null): void;
+/**
+ * Update the filter on selection highlight layers to show only the specified features.
+ * Pass empty array to hide all selection highlights.
+ */
+export declare function updateSelectionHighlight(map: maplibregl.Map, featureIds: (string | number)[]): void;

package/dist/src/components/GeoJsonViewer/GeoJsonViewerHoverPopup.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { InteractiveFeature } from "~/hooks/useFeatureInteraction";
+export interface GeoJsonViewerHoverPopupProps {
+    /** The feature currently being hovered. */
+    feature: InteractiveFeature;
+    /** Position of the popup relative to the map container. */
+    position: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Custom render functions for hover content based on the feature's `type` property.
+     * Keys are the `properties.type` values; the function receives the hovered feature
+     * and returns the content to display.
+     */
+    hoverContent?: Record<string, (feature: InteractiveFeature) => ReactNode>;
+}
+/**
+ * Popup component that displays when hovering over a map feature.
+ * Content is customizable per feature type via the `hoverContent` prop.
+ */
+export declare function GeoJsonViewerHoverPopup({ feature, position, hoverContent, }: GeoJsonViewerHoverPopupProps): React.JSX.Element;

package/dist/src/components/LayerToggle/LayerToggle.d.ts

@@ -15,4 +15,4 @@ import type { LayerToggleProps } from "./LayerToggle.types";
  * </div>
  * ```
  */
-export declare function LayerToggle({ className, defaultOpen, }: LayerToggleProps): React.JSX.Element;
+export declare function LayerToggle({ className, defaultOpen, }: LayerToggleProps): React.JSX.Element | null;

package/dist/src/components/shared/MapCenterAction.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from "react";
+import type maplibregl from "maplibre-gl";
+export interface MapCenterActionProps {
+    /** Ref to the MapLibre map instance. */
+    mapRef: RefObject<maplibregl.Map | null>;
+    /**
+     * Controls visibility.
+     * - `true` — always visible
+     * - `false` — always hidden
+     * - `undefined` — auto-detect (visible on touch devices)
+     */
+    visible?: boolean;
+}
+/**
+ * MapCenterAction — renders a crosshair at the map center and a button
+ * that triggers a synthetic click at the center of the map.
+ *
+ * Shown by default on touch-primary devices (pointer: coarse).
+ * Can be overridden with the `visible` prop.
+ */
+export declare function MapCenterAction({ mapRef, visible }: MapCenterActionProps): React.JSX.Element | null;
+export default MapCenterAction;

package/dist/src/components/shared/MapPicker.types.d.ts

@@ -8,10 +8,17 @@ export interface MapBaseProps {
     className?: string;
     /** Height of the map container. Defaults to `"400px"`. */
     height?: string;
+    /**
+     * Show a crosshair at the map center with a button to trigger a click there.
+     * - `true` — always visible
+     * - `false` — always hidden
+     * - `undefined` — auto-detect (visible on touch devices)
+     */
+    showCenterAction?: boolean;
 }
 /**
  * Common props shared by all map-based picker components
- * (CoordinatePicker, CoordinateDirectionPicker, etc.).
+ * (CoordinateField, CoordinateDirectionField, etc.).
  */
 export interface MapPickerBaseProps extends MapBaseProps {
     /** Label displayed above the component. */

package/dist/src/hooks/useCompassMarker.d.ts

@@ -1,5 +1,5 @@
 import maplibregl from "maplibre-gl";
-import type { CoordinateDirectionValue } from "~/components/CoordinateDirectionPicker/CoordinateDirectionPicker.types";
+import type { CoordinateDirectionValue } from "~/components/CoordinateDirectionField/CoordinateDirectionField.types";
 export interface UseCompassMarkerOptions {
     /** The MapLibre map instance to attach the marker to. */
     mapRef: React.RefObject<maplibregl.Map | null>;

package/dist/src/hooks/useFeatureInteraction.d.ts

@@ -0,0 +1,51 @@
+import type { Feature, GeoJsonProperties, Geometry } from "geojson";
+import type maplibregl from "maplibre-gl";
+/**
+ * A GeoJSON feature with an optional numeric ID for MapLibre compatibility.
+ */
+export type InteractiveFeature = Feature<Geometry, GeoJsonProperties> & {
+    id?: string | number;
+};
+export interface UseFeatureInteractionOptions {
+    /** Reference to the MapLibre map instance. */
+    mapRef: React.RefObject<maplibregl.Map | null>;
+    /** Layer IDs to query for features. */
+    layerIds: string[];
+    /** Source ID for the GeoJSON data. */
+    sourceId: string;
+    /** Whether feature interaction is enabled. Defaults to `true`. */
+    enabled?: boolean;
+    /** Whether hover interaction is enabled. Defaults to `true`. */
+    hoverable?: boolean;
+    /** Whether click/selection interaction is enabled. Defaults to `true`. */
+    selectable?: boolean;
+    /**
+     * Called when hovered feature changes.
+     * Receives the feature and the original mouse event, or null when hover ends.
+     */
+    onHover?: (feature: InteractiveFeature | null, event: maplibregl.MapMouseEvent | null) => void;
+    /**
+     * Called when selection changes.
+     * Receives array of selected features, or null when selection is cleared.
+     */
+    onSelect?: (features: InteractiveFeature[] | null) => void;
+}
+export interface UseFeatureInteractionResult {
+    /** Currently hovered feature, or null. */
+    hoveredFeature: InteractiveFeature | null;
+    /** Currently selected features. */
+    selectedFeatures: InteractiveFeature[];
+    /** Whether any feature is currently selected. */
+    hasSelection: boolean;
+    /** Programmatically clear the selection. */
+    clearSelection: () => void;
+    /** Programmatically select features by their IDs. */
+    selectByIds: (ids: (string | number)[]) => void;
+}
+/**
+ * Hook for managing feature hover and selection interactions on a MapLibre map.
+ *
+ * Features are queried using `queryRenderedFeatures` when the user hovers or clicks.
+ * Supports multi-selection via Ctrl/Cmd modifier keys.
+ */
+export declare function useFeatureInteraction({ mapRef, layerIds, sourceId, enabled, hoverable, selectable, onHover, onSelect, }: UseFeatureInteractionOptions): UseFeatureInteractionResult;

package/dist/src/hooks/useMaplibreMap.d.ts

@@ -14,10 +14,17 @@ export interface UseMaplibreMapOptions {
 /**
  * Manages a MapLibre GL map instance.
  *
- * Returns refs for the container element and the map, so callers can add
- * markers, layers, or event handlers on top.
+ * The map is created lazily — only once the container div enters the viewport.
+ * This prevents "Too many active WebGL contexts" warnings when many map
+ * components are rendered off-screen simultaneously (e.g. Storybook Docs).
+ *
+ * Returns refs for the container element and the map, plus a `mapReady` flag
+ * that is `true` once the map instance has been created. Callers that set up
+ * map event handlers or layers must include `mapReady` in their effect
+ * dependency arrays so those effects re-run once the map is available.
  */
 export declare function useMaplibreMap({ initialCoordinate, disabled, onMapClick, height, }?: UseMaplibreMapOptions): {
     mapContainerRef: React.RefObject<HTMLDivElement | null>;
     mapRef: React.RefObject<maplibregl.Map | null>;
+    mapReady: boolean;
 };

package/dist/src/hooks/useWmsFeatureInfo.d.ts

@@ -0,0 +1,24 @@
+import type maplibregl from "maplibre-gl";
+import type { Coordinate } from "~/utility/types";
+import type { CoordinateClickResult } from "~/utility/wmsGetFeatureInfo";
+export interface UseWmsFeatureInfoOptions {
+    /** Ref to the MapLibre map instance (needed for bounds / size). */
+    mapRef: React.RefObject<maplibregl.Map | null>;
+    /** The coordinate to query. Set to `null` when no query is pending. */
+    coordinate: Coordinate | null;
+    /** Whether the hook is active. Defaults to `true`. */
+    enabled?: boolean;
+}
+export interface UseWmsFeatureInfoResult {
+    /** Whether a GetFeatureInfo query is currently in flight. */
+    loading: boolean;
+    /** The latest result, or null if no query has been made yet. */
+    result: CoordinateClickResult | null;
+}
+/**
+ * Hook that queries WMS GetFeatureInfo for all visible WMS catalog layers
+ * when a coordinate is provided.
+ *
+ * Automatically cancels in-flight requests when a new coordinate is set.
+ */
+export declare function useWmsFeatureInfo({ mapRef, coordinate, enabled, }: UseWmsFeatureInfoOptions): UseWmsFeatureInfoResult;