@trackunit/react-map 0.0.9 → 0.0.11

package/index.cjs.js

@@ -1239,7 +1239,6 @@ function useMapAdapterState(adapterConfig) {
  * All action functions and the Map component reference are stable across re-renders.
  *
  * @param adapterConfig - Adapter configuration from an adapter factory (e.g., googleMapsAdapter)
- * @param options - Optional configuration for controls and other features
  * @returns Tuple of [Map component, API object]
  * @example Basic usage
  * ```tsx
@@ -1278,7 +1277,7 @@ function useMapAdapterState(adapterConfig) {
  * };
  * ```
  */
-const useMap = (adapterConfig, options) => {
+const useMap = (adapterConfig) => {
     const { adapter, renderConfig } = useMapAdapterState(adapterConfig);
     // Subscribe to status changes only (isReady, appearance, etc. — low frequency).
     // Camera state (center/zoom/bounds) is accessed via useCameraState(api) instead,
@@ -1355,7 +1354,6 @@ const useMap = (adapterConfig, options) => {
         actions,
         on,
         containerRef: containerRefHolder,
-        options,
         adapterConfig: renderConfig,
         annotations: annotationStore,
         loadingIndicator: loadingIndicatorStore,
@@ -1367,7 +1365,6 @@ const useMap = (adapterConfig, options) => {
         actions,
         on,
         containerRefHolder,
-        options,
         renderConfig,
         annotationStore,
         loadingIndicatorStore,
@@ -1607,7 +1604,12 @@ const collapseAll = (categories, allControls) => {
     }
     // Nothing to show
     if (allItems.length === 0) {
-        return { navigation: { controls: [] }, settings: { controls: [] }, tools: null, statistics: { controls: [] } };
+        return {
+            navigation: { controls: [] },
+            settings: { controls: [] },
+            tools: { controls: [] },
+            statistics: { controls: [] },
+        };
     }
     const singleMenu = {
         type: "menu",
@@ -1620,7 +1622,7 @@ const collapseAll = (categories, allControls) => {
     return {
         navigation: { controls: [singleMenu] },
         settings: { controls: [] },
-        tools: null,
+        tools: { controls: [] },
         statistics: { controls: [] },
     };
 };
@@ -1644,10 +1646,12 @@ const collapseControls = (config, mode, metadata) => {
     if (mode === "full")
         return config;
     // Categories that participate in collapse (statistics excluded — summary widgets stay visible).
+    // Tools fold into the single all-controls menu in "collapsed" mode; in "full"/"categorized"
+    // they render standalone in the top-right corner.
     const categories = [
         { key: "navigation", label: metadata.navigation.label, controls: config.navigation.controls },
         { key: "settings", label: metadata.settings.label, controls: config.settings.controls },
-        // tools are still null - to be implemented
+        { key: "tools", label: metadata.tools.label, controls: config.tools.controls },
     ];
     if (mode === "collapsed") {
         const collapsed = collapseAll(categories, metadata.allControls);
@@ -1660,7 +1664,10 @@ const collapseControls = (config, mode, metadata) => {
     const settings = {
         controls: collapseCategory(config.settings.controls, "settings", metadata.settings),
     };
-    return { navigation, settings, tools: null, statistics: config.statistics };
+    const tools = {
+        controls: collapseCategory(config.tools.controls, "tools", metadata.tools),
+    };
+    return { navigation, settings, tools, statistics: config.statistics };
 };
 
 /**
@@ -2413,6 +2420,109 @@ const GLOBE_CENTERS = [
 /** Pick the globe icon whose projection center is closest to the given longitude. */
 const longitudeToGlobeIcon = (longitude) => GLOBE_CENTERS.reduce((closest, current) => Math.abs(current.center - longitude) < Math.abs(closest.center - longitude) ? current : closest).icon;
 
+/**
+ * Internal component that renders controls.
+ * Separated to allow Suspense boundary in parent.
+ */
+const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
+    const [t] = useTranslation();
+    // Measure container to derive available space and responsive mode
+    const containerRef = react.useRef(null);
+    const { ref: measureRef, geometry } = reactComponents.useMeasure();
+    const mergedRef = reactComponents.useMergeRefs([containerRef, measureRef]);
+    const { displayAnnotations, isExiting, shouldRender: shouldRenderAnnotations, } = useAnnotationPresence(api.annotations);
+    const skipContainerBreakpoints = baseControlsConfig.navigation.controls.length === 0 &&
+        baseControlsConfig.settings.controls.length === 0 &&
+        baseControlsConfig.tools.controls.length === 0 &&
+        baseControlsConfig.statistics.controls.length === 0 &&
+        !shouldRenderAnnotations;
+    const breakpoints = reactComponents.useContainerBreakpoints(containerRef, { skip: skipContainerBreakpoints });
+    const containerHeight = geometry?.height ?? Infinity;
+    const safeAreaLayout = react.useContext(SafeAreaLayoutContext);
+    const measuredAvailableSpace = breakpoints.isSm && containerHeight >= HEIGHT_COMFORTABLE_THRESHOLD ? "comfortable" : "constrained";
+    const measuredResponsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
+    const availableSpace = safeAreaLayout?.availableSpace ?? measuredAvailableSpace;
+    const responsiveMode = safeAreaLayout?.responsiveMode ?? measuredResponsiveMode;
+    // Menus use modals only in collapsed mode (narrowest containers); popovers otherwise
+    const menuPresentation = responsiveMode === "collapsed" ? "modal" : "popover";
+    // Derive portal ID from the map container's stable ID (set by createMapComponent)
+    const portalId = api.containerRef.current?.id;
+    // Geolocation position for region-appropriate globe icon (updated if the user clicks "My Location")
+    const { position } = reactCoreHooks.useGeolocation();
+    const navigationIcon = position !== null ? longitudeToGlobeIcon(position[0]) : "GlobeEuropeAfrica";
+    // Category metadata: icon + translated label for menu triggers, tooltips, and section headers
+    const categoryMetadata = react.useMemo(() => ({
+        navigation: { icon: navigationIcon, label: t("controls.category.navigation") },
+        settings: { icon: "Cog6Tooth", label: t("controls.category.settings") },
+        tools: { icon: "Wrench", label: t("controls.category.tools") },
+        statistics: { icon: "ChartBarSquare", label: t("controls.category.statistics") },
+        allControls: { icon: "EllipsisHorizontal", label: t("controls.allControls") },
+    }), [t, navigationIcon]);
+    // Apply responsive collapsing -- restructures config based on available space
+    const controlsConfig = react.useMemo(() => collapseControls(baseControlsConfig, responsiveMode, categoryMetadata), [baseControlsConfig, responsiveMode, categoryMetadata]);
+    react.useLayoutEffect(() => api.annotations.claimRenderer(), [api.annotations]);
+    const { navigation, settings, tools, statistics } = controlsConfig;
+    const hasNavigationControls = navigation.controls.length > 0;
+    const hasSettingsControls = settings.controls.length > 0;
+    const hasToolsControls = tools.controls.length > 0;
+    const hasStatisticsControls = statistics.controls.length > 0;
+    const hasStatisticsAreaContent = shouldRenderAnnotations || hasStatisticsControls;
+    if (!hasNavigationControls && !hasSettingsControls && !hasToolsControls && !hasStatisticsAreaContent) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(
+        // Overlay positioning within Map's ZStack grid
+        "col-start-1 row-start-1", 
+        // Pointer events only on children, not the overlay itself
+        "pointer-events-none", 
+        // Layout grid for semantic areas
+        "grid h-full w-full", 
+        // Responsive grid: navigation bottom-right, settings top-left, statistics bottom-left
+        "grid-cols-[1fr_auto] grid-rows-[auto_1fr_auto]", 
+        // Isolate creates a new stacking context to avoid z-index issues
+        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasToolsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasNavigationControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1", children: navigation.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsxRuntime.jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsxRuntime.jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null] })) : null] }));
+};
+/**
+ * Map controls renderer — lays out a `ControlsConfig` across the four semantic
+ * areas of the map (top-right tools, bottom-right navigation, top-left settings,
+ * bottom-left statistics + annotations).
+ *
+ * Build the `controls` prop with `useDefaultControls`, `useControls`, or
+ * `composeControlAreas`. For the common "default built-ins only" case prefer
+ * the `<DefaultControls>` wrapper which combines these two steps.
+ *
+ * Inherits layout decisions from the surrounding SafeAreaOverlay when rendered
+ * inside `<Map>`, and falls back to its own container measurement when
+ * rendered standalone.
+ *
+ * Uses Suspense internally to handle translation loading without blocking the map.
+ *
+ * @example
+ * ```tsx
+ * import { useMap, useDefaultControls, Controls } from "@trackunit/react-map";
+ * import { googleMapsAdapter } from "@trackunit/react-map-adapter-google";
+ *
+ * const MyMap = () => {
+ *   const [Map, api] = useMap(googleMapsAdapter({ apiKey }));
+ *   const controls = useDefaultControls(api);
+ *
+ *   return (
+ *     <Map>
+ *       <Controls api={api} controls={controls} />
+ *     </Map>
+ *   );
+ * };
+ * ```
+ */
+const ControlsInner = ({ api, controls, className }) => {
+    // Wrap in Suspense to handle useTranslation loading without blocking parent components
+    return (jsxRuntime.jsx(react.Suspense, { fallback: null, children: jsxRuntime.jsx(ControlsContent, { api: api, className: className, controls: controls }) }));
+};
+// `api` identity is stable between camera events since useMap only re-runs its useMemo
+// when MapStatus (isReady, appearance, etc.) changes — not on pan/zoom. Default React.memo
+// shallow equality is sufficient; no custom comparator needed.
+const Controls = react.memo(ControlsInner);
+
 const cvaMapPreview = cssClassVarianceUtilities.cvaMerge([
     "relative",
     "h-[72px]",
@@ -2608,11 +2718,11 @@ const buildAppearanceOptions = (themes, mapTypes, t) => {
  * const controlsConfig: ControlsConfig = {
  *   navigation: { controls: navigationControls },
  *   settings: { controls: appearanceControls },
- *   tools: null,
+ *   tools: { controls: [] },
  *   statistics: { controls: [] },
  * };
  *
- * <Controls api={api} controlsConfig={controlsConfig} />
+ * <Controls api={api} controls={controlsConfig} />
  * ```
  */
 const useMapAppearanceControls = ({ api, options: appearanceOptions, persistenceKey = "map-appearance-settings", }) => {
@@ -2730,17 +2840,36 @@ const defineControlStack = (controls) => {
     return stack;
 };
 
+// ============================================================================
+// Hook
+// ============================================================================
 /**
- * Builds the controls configuration from useMap options and api.
+ * Builds the default built-in controls configuration (zoom, fullscreen, my
+ * location, map style) from the map API.
+ *
+ * Replaces `useControlsConfig` with a cleaner, flat options structure. Each
+ * control can be disabled individually via `options`. Omitting `options`
+ * enables all controls.
  *
- * Creates control config objects with bound callbacks for each enabled control.
- * The Controls component uses this configuration to render controls.
- * Consumers can compose custom stacks from the named built-in handles.
+ * Returns a `BuiltInControlsConfig` — a `ControlsConfig` enriched with named
+ * handles for each built-in control so consumers can reference them without
+ * searching by id.
+ *
+ * @example
+ * ```tsx
+ * const builtIn = useDefaultControls(api);
+ * return <Controls controls={builtIn} api={api} />;
+ * ```
+ * @example Disable specific controls
+ * ```tsx
+ * const builtIn = useDefaultControls(api, {
+ *   navigation: { myLocation: { enabled: false } },
+ * });
+ * ```
  */
-const useControlsConfig = ({ options, api }) => {
+const useDefaultControls = (api, options) => {
     const [t] = useTranslation();
     const { getPosition } = reactCoreHooks.useGeolocation();
-    // Fullscreen state and callbacks derived from the container ref
     const isFullscreen = reactComponents.useIsFullscreen();
     const requestFullscreen = react.useCallback(() => {
         void api.containerRef.current?.requestFullscreen();
@@ -2748,20 +2877,18 @@ const useControlsConfig = ({ options, api }) => {
     const exitFullscreen = react.useCallback(() => {
         void document.exitFullscreen();
     }, []);
-    const zoomControl = react.useMemo(() => options?.controls?.zoom?.enabled === false
+    const zoomControl = react.useMemo(() => options?.navigation?.zoom?.enabled === false
         ? undefined
         : {
-            // Zoom stepper control - uses relative zoom(delta)
             type: "stepper",
             id: "zoom",
             label: t("controls.zoom"),
             increment: () => void api.actions.zoomBy(1),
             decrement: () => void api.actions.zoomBy(-1),
-        }, [api.actions, options?.controls?.zoom?.enabled, t]);
-    const fullscreenControl = react.useMemo(() => options?.controls?.fullscreen?.enabled === false
+        }, [api.actions, options?.navigation?.zoom?.enabled, t]);
+    const fullscreenControl = react.useMemo(() => options?.navigation?.fullscreen?.enabled === false
         ? undefined
         : {
-            // Fullscreen toggle control
             type: "toggle",
             id: "fullscreen",
             icon: { on: "ArrowsPointingIn", off: "ArrowsPointingOut" },
@@ -2776,11 +2903,10 @@ const useControlsConfig = ({ options, api }) => {
                 }
             },
             "data-testid": "map-fullscreen-button",
-        }, [exitFullscreen, isFullscreen, options?.controls?.fullscreen?.enabled, requestFullscreen, t]);
-    const myLocationControl = react.useMemo(() => options?.controls?.myLocation?.enabled === false
+        }, [exitFullscreen, isFullscreen, options?.navigation?.fullscreen?.enabled, requestFullscreen, t]);
+    const myLocationControl = react.useMemo(() => options?.navigation?.myLocation?.enabled === false
         ? undefined
         : {
-            // My location button - zooms the map to a ~2x2 km box around the user's position
             type: "button",
             id: "my-location",
             icon: "Gps",
@@ -2790,7 +2916,6 @@ const useControlsConfig = ({ options, api }) => {
                     if (pos === null)
                         return;
                     const [longitude, latitude] = pos;
-                    // ~1 km in degrees: lat is constant, lon varies by cos(lat)
                     const latOffset = 1 / 111;
                     const lonOffset = 1 / (111 * Math.cos((latitude * Math.PI) / 180));
                     void api.actions.fitBounds([
@@ -2802,11 +2927,10 @@ const useControlsConfig = ({ options, api }) => {
                 });
             },
             "data-testid": "map-my-location-button",
-        }, [api.actions, getPosition, options?.controls?.myLocation?.enabled, t]);
+        }, [api.actions, getPosition, options?.navigation?.myLocation?.enabled, t]);
     const navigationControls = react.useMemo(() => defineControlStack([zoomControl, fullscreenControl, myLocationControl]), [fullscreenControl, myLocationControl, zoomControl]);
-    // Map appearance controls (settings area) - live mini-map previews for switching theme/style
     const mapAppearanceControls = useMapAppearanceControls({ api });
-    const mapStyleControl = react.useMemo(() => options?.controls?.mapStyle?.enabled === false ? undefined : mapAppearanceControls[0], [mapAppearanceControls, options?.controls?.mapStyle?.enabled]);
+    const mapStyleControl = react.useMemo(() => options?.settings?.mapStyle?.enabled === false ? undefined : mapAppearanceControls[0], [mapAppearanceControls, options?.settings?.mapStyle?.enabled]);
     const settingsControls = react.useMemo(() => defineControlStack([mapStyleControl]), [mapStyleControl]);
     return react.useMemo(() => ({
         navigation: {
@@ -2819,107 +2943,112 @@ const useControlsConfig = ({ options, api }) => {
             controls: settingsControls,
             mapStyle: mapStyleControl,
         },
-        tools: null,
+        tools: { controls: [] },
         statistics: { controls: [] },
     }), [fullscreenControl, mapStyleControl, myLocationControl, navigationControls, settingsControls, zoomControl]);
 };
 
 /**
- * Internal component that builds and renders controls.
- * Separated to allow Suspense boundary in parent.
- */
-const ControlsContent = ({ api, className, controlsConfigProp }) => {
-    const [t] = useTranslation();
-    // Measure container to derive available space and responsive mode
-    const containerRef = react.useRef(null);
-    const { ref: measureRef, geometry } = reactComponents.useMeasure();
-    const mergedRef = reactComponents.useMergeRefs([containerRef, measureRef]);
-    const builtControlsConfig = useControlsConfig({ options: api.options, api });
-    const baseControlsConfig = controlsConfigProp ?? builtControlsConfig;
-    const { displayAnnotations, isExiting, shouldRender: shouldRenderAnnotations, } = useAnnotationPresence(api.annotations);
-    const skipContainerBreakpoints = baseControlsConfig.navigation.controls.length === 0 &&
-        baseControlsConfig.settings.controls.length === 0 &&
-        baseControlsConfig.statistics.controls.length === 0 &&
-        !shouldRenderAnnotations;
-    const breakpoints = reactComponents.useContainerBreakpoints(containerRef, { skip: skipContainerBreakpoints });
-    const containerHeight = geometry?.height ?? Infinity;
-    const safeAreaLayout = react.useContext(SafeAreaLayoutContext);
-    const measuredAvailableSpace = breakpoints.isSm && containerHeight >= HEIGHT_COMFORTABLE_THRESHOLD ? "comfortable" : "constrained";
-    const measuredResponsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
-    const availableSpace = safeAreaLayout?.availableSpace ?? measuredAvailableSpace;
-    const responsiveMode = safeAreaLayout?.responsiveMode ?? measuredResponsiveMode;
-    // Menus use modals only in collapsed mode (narrowest containers); popovers otherwise
-    const menuPresentation = responsiveMode === "collapsed" ? "modal" : "popover";
-    // Derive portal ID from the map container's stable ID (set by createMapComponent)
-    const portalId = api.containerRef.current?.id;
-    // Geolocation position for region-appropriate globe icon (updated if the user clicks "My Location")
-    const { position } = reactCoreHooks.useGeolocation();
-    const navigationIcon = position !== null ? longitudeToGlobeIcon(position[0]) : "GlobeEuropeAfrica";
-    // Category metadata: icon + translated label for menu triggers, tooltips, and section headers
-    const categoryMetadata = react.useMemo(() => ({
-        navigation: { icon: navigationIcon, label: t("controls.category.navigation") },
-        settings: { icon: "Cog6Tooth", label: t("controls.category.settings") },
-        tools: { icon: "Wrench", label: t("controls.category.tools") },
-        statistics: { icon: "ChartBarSquare", label: t("controls.category.statistics") },
-        allControls: { icon: "EllipsisHorizontal", label: t("controls.allControls") },
-    }), [t, navigationIcon]);
-    // Apply responsive collapsing -- restructures config based on available space
-    const controlsConfig = react.useMemo(() => collapseControls(baseControlsConfig, responsiveMode, categoryMetadata), [baseControlsConfig, responsiveMode, categoryMetadata]);
-    react.useLayoutEffect(() => api.annotations.claimRenderer(), [api.annotations]);
-    const { navigation, settings, statistics } = controlsConfig;
-    const hasNavigationControls = navigation.controls.length > 0;
-    const hasSettingsControls = settings.controls.length > 0;
-    const hasStatisticsControls = statistics.controls.length > 0;
-    const hasStatisticsAreaContent = shouldRenderAnnotations || hasStatisticsControls;
-    if (!hasNavigationControls && !hasSettingsControls && !hasStatisticsAreaContent) {
-        return null;
-    }
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(
-        // Overlay positioning within Map's ZStack grid
-        "col-start-1 row-start-1", 
-        // Pointer events only on children, not the overlay itself
-        "pointer-events-none", 
-        // Layout grid for semantic areas
-        "grid h-full w-full", 
-        // Responsive grid: navigation bottom-right, settings top-left, statistics bottom-left
-        "grid-cols-[1fr_auto] grid-rows-[auto_1fr_auto]", 
-        // Isolate creates a new stacking context to avoid z-index issues
-        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1", children: navigation.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsxRuntime.jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsxRuntime.jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null] })) : null] }));
-};
-/**
- * Map controls component that renders navigation and settings controls.
- *
- * Builds controls configuration internally using useControlsConfig hook.
- * Uses semantic areas (navigation, settings, tools, statistics) for organization.
- * All layout decisions are owned by this component for responsive positioning.
- *
- * Inherits layout decisions from the surrounding SafeAreaOverlay when rendered
- * inside <Map>, and falls back to its own measurement when rendered standalone.
+ * Convenience wrapper that calls `useDefaultControls` and passes the result
+ * directly to `<Controls>`.
  *
- * Uses Suspense internally to handle translation loading without blocking the map.
+ * Use this for the common case where only the built-in controls (zoom,
+ * fullscreen, my location, map style) are needed, with no custom additions.
+ * For custom control stacks, call `useDefaultControls` + `useControls` (or
+ * `composeControlAreas`) and pass the result to `<Controls>` directly.
  *
  * @example
  * ```tsx
- * import { useMap, Controls } from "@trackunit/react-map";
+ * import { useMap, DefaultControls } from "@trackunit/react-map";
  * import { googleMapsAdapter } from "@trackunit/react-map-adapter-google";
  *
- * const [Map, api] = useMap(googleMapsAdapter({ apiKey }));
+ * const MyMap = () => {
+ *   const [Map, api] = useMap(googleMapsAdapter({ apiKey }));
  *
- * return (
- *   <Map>
- *     <Controls api={api} />
- *   </Map>
- * );
+ *   return (
+ *     <Map>
+ *       <DefaultControls api={api} />
+ *     </Map>
+ *   );
+ * };
  * ```
  */
-const ControlsInner = ({ api, className, controlsConfig: controlsConfigProp }) => {
-    // Wrap in Suspense to handle useTranslation loading without blocking parent components
-    return (jsxRuntime.jsx(react.Suspense, { fallback: null, children: jsxRuntime.jsx(ControlsContent, { api: api, className: className, controlsConfigProp: controlsConfigProp }) }));
+const DefaultControls = ({ api, options, className }) => {
+    const controls = useDefaultControls(api, options);
+    return jsxRuntime.jsx(Controls, { api: api, className: className, controls: controls });
+};
+
+// ============================================================================
+// Internal helpers
+// ============================================================================
+/**
+ * Applies prepend/append modifiers to a single area section.
+ * Returns the original section reference unchanged when no modifiers are given.
+ */
+const applyAreaModifiers = (section, area) => {
+    const { prepend, append } = area;
+    const hasPrepend = prepend !== undefined && prepend.length > 0;
+    const hasAppend = append !== undefined && append.length > 0;
+    if (!hasPrepend && !hasAppend)
+        return section;
+    return {
+        ...section,
+        controls: defineControlStack([...(prepend ?? []), ...section.controls, ...(append ?? [])]),
+    };
+};
+const CATEGORY_KEYS = ["navigation", "settings", "tools", "statistics"];
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Merges per-area `prepend`/`append` modifier lists into a base `ControlsConfig`.
+ *
+ * Memoizes internally — stable references are returned when neither `base` nor
+ * `areas` has changed. Modifiers are applied via `defineControlStack`, which
+ * filters `undefined` entries and rejects duplicate control ids.
+ *
+ * When `areas` is omitted the `base` reference is returned as-is.
+ *
+ * @example
+ * ```ts
+ * const builtIn = useDefaultControls(api);
+ * const controls = useControls(builtIn, {
+ *   navigation: { append: [layerNavControl] },
+ *   settings: { prepend: [layerSettingsControl] },
+ * });
+ * ```
+ */
+const useControls = (base, areas) => {
+    return react.useMemo(() => {
+        if (areas === undefined)
+            return base;
+        let hasChanges = false;
+        const updated = {
+            navigation: base.navigation,
+            settings: base.settings,
+            tools: base.tools,
+            statistics: base.statistics,
+        };
+        for (const key of CATEGORY_KEYS) {
+            const area = areas[key];
+            if (area === undefined)
+                continue;
+            const modified = applyAreaModifiers(base[key], area);
+            if (modified !== base[key]) {
+                updated[key] = modified;
+                hasChanges = true;
+            }
+        }
+        if (!hasChanges)
+            return base;
+        return {
+            navigation: updated.navigation,
+            settings: updated.settings,
+            tools: updated.tools,
+            statistics: updated.statistics,
+        };
+    }, [base, areas]);
 };
-// `api` identity is stable between camera events since useMap only re-runs its useMemo
-// when MapStatus (isReady, appearance, etc.) changes — not on pan/zoom. Default React.memo
-// shallow equality is sufficient; no custom comparator needed.
-const Controls = react.memo(ControlsInner);
 
 const MARKER_SPRING_CONFIG = {
     stiffness: 380,
@@ -4592,7 +4721,7 @@ const useLayerReady = (loading) => {
 // ============================================================================
 // Constants
 // ============================================================================
-const EMPTY_CONTROLS$4 = [];
+const EMPTY_CONTROLS$3 = {};
 // ============================================================================
 // Hook
 // ============================================================================
@@ -4632,7 +4761,7 @@ const useImageOverlay = (options) => {
         ready: layerReady.ready,
         getBounds,
         counts,
-        controls: controls ?? EMPTY_CONTROLS$4,
+        controls: controls ?? EMPTY_CONTROLS$3,
         fitParticipation,
         layerType: "image-overlay",
         url,
@@ -4913,7 +5042,7 @@ const createLazyGetter = (compute) => {
 // ============================================================================
 // Constants
 // ============================================================================
-const EMPTY_CONTROLS$3 = [];
+const EMPTY_CONTROLS$2 = {};
 const EMPTY_FEATURES$1 = { type: "FeatureCollection", features: [] };
 // ============================================================================
 // Internal helpers
@@ -5001,7 +5130,7 @@ const useRoute = (options) => {
         ready: layerReady.ready,
         getBounds,
         counts,
-        controls: controls ?? EMPTY_CONTROLS$3,
+        controls: controls ?? EMPTY_CONTROLS$2,
         fitParticipation,
         layerType: "route",
         features,
@@ -5191,7 +5320,12 @@ const interactionReducer = (state, action) => {
 // ============================================================================
 // Constants
 // ============================================================================
-const EMPTY_CONTROLS$2 = [];
+const EMPTY_AREA_CONTROLS = {
+    navigation: [],
+    settings: [],
+    tools: [],
+    statistics: [],
+};
 const RESOLVED_PROMISE = Promise.resolve();
 // ============================================================================
 // Hook
@@ -5257,17 +5391,28 @@ const useLayers = (api, layers) => {
         const promises = layers.map(layer => layer.ready);
         return Promise.all(promises).then(() => undefined);
     }, [layers]);
-    // ---- Controls (aggregated from all layers) ----
+    // ---- Controls (aggregated per area from all layers) ----
     const controls = react.useMemo(() => {
-        const allControls = [];
+        const areaKeys = ["navigation", "settings", "tools", "statistics"];
+        const areas = {
+            navigation: [],
+            settings: [],
+            tools: [],
+            statistics: [],
+        };
+        let hasAny = false;
         for (const layer of layers) {
-            if (layer.controls.length > 0) {
-                allControls.push(...layer.controls);
+            for (const key of areaKeys) {
+                const areaControls = layer.controls[key];
+                if (areaControls !== undefined && areaControls.length > 0) {
+                    areas[key].push(...areaControls);
+                    hasAny = true;
+                }
             }
         }
-        if (allControls.length === 0)
-            return EMPTY_CONTROLS$2;
-        return allControls;
+        if (!hasAny)
+            return EMPTY_AREA_CONTROLS;
+        return areas;
     }, [layers]);
     // ---- Build the return object ----
     return react.useMemo(() => ({
@@ -5483,7 +5628,7 @@ const resolveServerClusters = (cluster, data, getId, resolveGroups, viewportCtx)
 // Empty constants (stable references)
 // ============================================================================
 const EMPTY_FEATURES = { type: "FeatureCollection", features: [] };
-const EMPTY_CONTROLS$1 = [];
+const EMPTY_CONTROLS$1 = {};
 /**
  * Filter items to only those with valid positions and extract id + position.
  * Invalid positions (e.g. latitude out of range) are skipped. Logs once when any are filtered.
@@ -6184,7 +6329,7 @@ const buildMultiPartDecorations = (feature, strokeColor, pointRadius, strokeWidt
 // ============================================================================
 // Constants
 // ============================================================================
-const EMPTY_CONTROLS = [];
+const EMPTY_CONTROLS = {};
 const EMPTY_STYLE = {};
 // ============================================================================
 // Internal helpers
@@ -9255,285 +9400,165 @@ const ShapeAnnotationLabel = ({ geometry, color, label, theme, isHovered = false
     return jsxRuntime.jsx("div", { className: "pointer-events-none", children: pill });
 };
 
-const markerStateFromParams = (params) => {
-    if ("markerState" in params) {
-        return params.markerState;
-    }
-    const input = {
-        selected: params.selected,
-        hovered: params.hovered,
-        expandedRank: params.expandedRank,
-    };
-    return resolveMarkerState(input);
-};
-const stackPhaseForMarkerState = (markerState) => {
-    if (markerState === "selected")
-        return "selected";
-    if (markerState === "hovered")
-        return "hovered";
-    if (markerState === "expanded")
-        return "expanded";
-    return "idle";
-};
 /**
- * Maps `<MapMarker>` presentation + state to `DomPortalStackingResult` for use with
- * `markerRender.resolveDomPortalStacking` in `<Layers>`.
+ * Build-your-own hook: stable reference to the cluster count formatter.
  *
- * Pass either `expandedRank` (for `resolveMarkerState`) or a pre-resolved `markerState`
- * when the expanded state is data-driven and does not use `expandedRank` (for example, story helpers).
- */
-const resolveMapMarkerDomPortalStacking = (params) => {
-    const { hasStick, isMounting, labelVisible } = params;
-    if (isMounting === true) {
-        return { geometry: "circle", phase: "idle" };
-    }
-    const markerState = markerStateFromParams(params);
-    const form = resolveMarkerForm(markerState, labelVisible);
-    const geometry = hasStick === true ? "stick" : form === "pill" ? "pill" : "circle";
-    return {
-        geometry,
-        phase: stackPhaseForMarkerState(markerState),
-    };
-};
-
-/**
- * Build-your-own hook: stable references to the full adaptive marker kit.
- *
- * Returns the complete set of primitives needed to hand-roll an adaptive marker
- * layer (DOM ↔ symbol mode switching, zoom-based sizing, portal stacking) while
- * staying consistent with `useMarkers`'s built-in rendering pipeline.
+ * Returns `formatClusterCount` for consumers building custom cluster markers
+ * that need consistent `"1.2k / 3.4m"` formatting without reimplementing
+ * the truncation rules.
  *
  * @example
  * ```tsx
- * const {
- *   pickRenderMedium, pickMarkerSize, pickSymbolDescriptor,
- *   resolveAdaptiveMarkerState, resolveMapMarkerDomPortalStacking,
- * } = useAdaptiveMarkerHelpers();
- *
- * // Inside your adaptive render callback:
- * const medium = pickRenderMedium(ctx);
- * if (medium === "symbol") return pickSymbolDescriptor(color, theme, ctx);
- * const size  = pickMarkerSize(ctx);
- * const state = resolveAdaptiveMarkerState({ selected, hovered });
+ * const { formatClusterCount } = useClusterCountFormat();
+ * // Inside your cluster render:
+ * return <div>{formatClusterCount(clusterCount)}</div>;
  * ```
  */
-const useAdaptiveMarkerHelpers = () => {
+const useClusterCountFormat = () => {
     return react.useMemo(() => ({
-        pickMarkerSize,
-        pickRenderMedium,
-        pickSymbolDescriptor,
-        pickSymbolDiameter,
-        resolveAdaptiveMarkerState,
-        downgradeMarkerDomSize,
-        upgradeMarkerDomSize,
-        resolveMapMarkerDomPortalStacking,
-        DEFAULT_MARKER_SIZE_BREAKPOINTS,
-        MARKER_DISC_BORDER_WIDTH_PX,
+        formatClusterCount,
     }), []);
 };
 
 /**
- * Build-your-own hook: stable reference to the `fitFeatureBounds` map action.
+ * Pure function that builds a `ControlsConfig` from per-area control stacks.
  *
- * Returns the `fitFeatureBounds` helper for consumers who need to programmatically
- * zoom/fit the viewport to a GeoJSON geometry — for example in click handlers that
- * should navigate to a selected shape or annotation.
+ * Each area in `areas` is passed through `defineControlStack` (which filters
+ * `undefined` entries and rejects duplicate ids). Omitted areas default to
+ * `{ controls: [] }`.
  *
  * @example
- * ```tsx
- * const { fitFeatureBounds } = useFitFeatureBounds();
- * // On click:
- * fitFeatureBounds(api, feature.geometry);
- * ```
- */
-const useFitFeatureBounds = () => {
-    return react.useMemo(() => ({
-        fitFeatureBounds,
-    }), []);
-};
-
-const PADDING_PX = 12;
-/**
- * Default auto-pan resolver: pans the minimum amount to give the panel the
- * best possible screen space. Handles two cases:
- *
- * 1. **Clipping** — panel bleeds outside the map container on any side. Pans
- *    to clear the bleed with 12 px of breathing room.
- *
- * 2. **Scroll-squish** — panel is within the container but shift-pressed against
- *    an edge, so content overflows and the panel scrolls. Pans to give the panel
- *    room to grow, up to the CSS `max-height` cap (`panelCssMaxHeight`).
- *
- * Returns `null` when the panel already fits without scrolling and without
- * clipping — meaning no pan is needed.
- *
- * Pass as `resolveAutoPan` to {@link usePanel} for the standard behavior:
- *
- * ```tsx
- * usePanel(api, {
- *   id: "my-panel",
- *   open: isOpen,
- *   resolveAutoPan: defaultAutoPanResolver,
- *   children: <MyPanelContent />,
+ * ```ts
+ * const controls = composeControlAreas({
+ *   navigation: [builtIn.navigation.zoom, builtIn.navigation.fullscreen],
+ *   settings: [builtIn.settings.mapStyle],
  * });
  * ```
  */
-const defaultAutoPanResolver = (ctx) => {
-    const { clipping, placement, panelRect, anchorRect, panelScrollHeight, panelCssMaxHeight } = ctx;
-    // --- Clipping: clear overflow past container edges ---
-    const x = clipping.right > 0 ? clipping.right + PADDING_PX : clipping.left > 0 ? -(clipping.left + PADDING_PX) : 0;
-    const clippingY = clipping.bottom > 0 ? clipping.bottom + PADDING_PX : clipping.top > 0 ? -(clipping.top + PADDING_PX) : 0;
-    // --- Scroll-squish: pan to give the panel room to stop scrolling.
-    // Cap at panelCssMaxHeight — panning further cannot reduce scrolling.
-    const squishAmount = Math.max(0, Math.min(panelScrollHeight, panelCssMaxHeight) - panelRect.height);
-    let squishY = 0;
-    if (squishAmount > 0) {
-        if (placement.startsWith("top")) {
-            // Panel is above the anchor. Move anchor down (negative y) to open space above.
-            squishY = -(squishAmount + PADDING_PX);
-        }
-        else if (placement.startsWith("bottom")) {
-            // Panel is below the anchor. Move anchor up (positive y) to open space below.
-            squishY = squishAmount + PADDING_PX;
-        }
-        else {
-            // left/right placements: panel is vertically centered on the anchor.
-            // Infer which edge shift pressed the panel against by comparing the
-            // panel's natural center position to its actual rendered top.
-            const anchorCenterY = anchorRect.top + anchorRect.height / 2;
-            const naturalPanelTop = anchorCenterY - panelRect.height / 2;
-            const shiftDelta = panelRect.top - naturalPanelTop;
-            if (shiftDelta > 1) {
-                // Shift pressed panel down (anchor near top) — move anchor down.
-                squishY = -(squishAmount + PADDING_PX);
-            }
-            else if (shiftDelta < -1) {
-                // Shift pressed panel up (anchor near bottom) — move anchor up.
-                squishY = squishAmount + PADDING_PX;
-            }
-            // shiftDelta ≈ 0: squish is from CSS max-height alone, not position — skip.
-        }
-    }
-    // After shift, clippingY and squishY are mutually exclusive on the same axis
-    // (shift keeps the panel within container bounds). clippingY takes priority as
-    // a defensive fallback for the edge case where both are non-zero.
-    const y = clippingY || squishY;
-    if (x === 0 && y === 0)
-        return null;
-    return { x, y, restoreOnDismiss: true };
-};
+const composeControlAreas = (areas) => ({
+    navigation: { controls: defineControlStack(areas.navigation ?? []) },
+    settings: { controls: defineControlStack(areas.settings ?? []) },
+    tools: { controls: defineControlStack(areas.tools ?? []) },
+    statistics: { controls: defineControlStack(areas.statistics ?? []) },
+});
 
 /**
- * Build-your-own hook: stable reference to the default auto-pan resolver.
+ * Build-your-own hook: stable references to control composition helpers.
  *
- * Returns `defaultAutoPanResolver` for consumers who want to pass it to
- * `usePanel({ resolveAutoPan })` or use it as a baseline to wrap/replace
- * with custom logic.
+ * Returns `defineControlStack` and `composeControlAreas` for consumers building
+ * custom control layouts without duplicating the stack-ordering logic already
+ * used by `Controls`.
  *
  * @example
  * ```tsx
- * const { defaultAutoPanResolver } = useAutoPanResolver();
- * usePanel(api, {
- *   id: "my-panel",
- *   open: isOpen,
- *   resolveAutoPan: defaultAutoPanResolver,
- *   children: <MyContent />,
+ * const { defineControlStack, composeControlAreas } = useControlStack();
+ * const controls = composeControlAreas({
+ *   navigation: [builtIn.navigation.zoom, builtIn.navigation.fullscreen],
+ *   settings: [builtIn.settings.mapStyle],
  * });
  * ```
  */
-const useAutoPanResolver = () => {
+const useControlStack = () => {
     return react.useMemo(() => ({
-        defaultAutoPanResolver,
+        defineControlStack,
+        composeControlAreas,
     }), []);
 };
 
 /**
- * Build-your-own hook: stable reference to the cluster count formatter.
+ * Build-your-own hook: stable reference to the `fitFeatureBounds` map action.
  *
- * Returns `formatClusterCount` for consumers building custom cluster markers
- * that need consistent `"1.2k / 3.4m"` formatting without reimplementing
- * the truncation rules.
+ * Returns the `fitFeatureBounds` helper for consumers who need to programmatically
+ * zoom/fit the viewport to a GeoJSON geometry — for example in click handlers that
+ * should navigate to a selected shape or annotation.
  *
  * @example
  * ```tsx
- * const { formatClusterCount } = useClusterCountFormat();
- * // Inside your cluster render:
- * return <div>{formatClusterCount(clusterCount)}</div>;
+ * const { fitFeatureBounds } = useFitFeatureBounds();
+ * // On click:
+ * fitFeatureBounds(api, feature.geometry);
  * ```
  */
-const useClusterCountFormat = () => {
+const useFitFeatureBounds = () => {
     return react.useMemo(() => ({
-        formatClusterCount,
+        fitFeatureBounds,
     }), []);
 };
 
-/**
- * Build-your-own hook: stable references to control composition/layout helpers.
- *
- * Returns `defineControlStack` and `collapseControls` for consumers building
- * custom control layouts without duplicating the stack-ordering and responsive-
- * collapse logic already used by `Controls`.
- *
- * @example
- * ```tsx
- * const { defineControlStack, collapseControls } = useControlStack();
- * const controls = defineControlStack([myControl, undefined, otherControl]);
- * const collapsed = collapseControls(config, responsiveMode, metadata);
- * ```
- */
-const useControlStack = () => {
-    return react.useMemo(() => ({
-        defineControlStack,
-        collapseControls,
-    }), []);
+const markerStateFromParams = (params) => {
+    if ("markerState" in params) {
+        return params.markerState;
+    }
+    const input = {
+        selected: params.selected,
+        hovered: params.hovered,
+        expandedRank: params.expandedRank,
+    };
+    return resolveMarkerState(input);
+};
+const stackPhaseForMarkerState = (markerState) => {
+    if (markerState === "selected")
+        return "selected";
+    if (markerState === "hovered")
+        return "hovered";
+    if (markerState === "expanded")
+        return "expanded";
+    return "idle";
 };
-
 /**
- * Build-your-own hook: stable references to theme-aware marker color primitives.
- *
- * Returns the `defaultMarkerColorConfig` factory and `resolveMarkerColors` resolver
- * for consumers building custom marker components that need to stay visually
- * consistent with `MapMarker`'s pill/indicator color system.
+ * Maps `<MapMarker>` presentation + state to `DomPortalStackingResult` for use with
+ * `markerRender.resolveDomPortalStacking` in `<Layers>`.
  *
- * @example
- * ```tsx
- * const { defaultMarkerColorConfig, resolveMarkerColors } = useMarkerColors();
- * const config  = defaultMarkerColorConfig(theme);
- * const colors  = resolveMarkerColors(fillColor, state, theme, config);
- * // Spread colors.cssVars onto the marker root element.
- * ```
+ * Pass either `expandedRank` (for `resolveMarkerState`) or a pre-resolved `markerState`
+ * when the expanded state is data-driven and does not use `expandedRank` (for example, story helpers).
  */
-const useMarkerColors = () => {
-    return react.useMemo(() => ({
-        defaultMarkerColorConfig,
-        resolveMarkerColors,
-        MARKER_DARK_PILL,
-        MARKER_LIGHT_PILL,
-    }), []);
+const resolveMapMarkerDomPortalStacking = (params) => {
+    const { hasStick, isMounting, labelVisible } = params;
+    if (isMounting === true) {
+        return { geometry: "circle", phase: "idle" };
+    }
+    const markerState = markerStateFromParams(params);
+    const form = resolveMarkerForm(markerState, labelVisible);
+    const geometry = hasStick === true ? "stick" : form === "pill" ? "pill" : "circle";
+    return {
+        geometry,
+        phase: stackPhaseForMarkerState(markerState),
+    };
 };
 
 /**
- * Build-your-own hook: stable references to marker state resolution primitives.
+ * Build-your-own hook: stable references to the full adaptive marker kit.
  *
- * Returns a memoized object of the pure resolver functions for consumers that
- * want to hand-roll their own MapMarker replacement while staying consistent
- * with the library's state priority rules (selected → expanded → hovered → default).
+ * Returns the complete set of primitives needed to hand-roll an adaptive marker
+ * layer (DOM ↔ symbol mode switching, zoom-based sizing, portal stacking) while
+ * staying consistent with `useMarkers`'s built-in rendering pipeline.
  *
  * @example
  * ```tsx
- * const { resolveMarkerState, resolveMarkerForm } = useMarkerStateResolvers();
- * const state = resolveMarkerState({ selected, hovered, expandedRank });
- * const form  = resolveMarkerForm(state, labelVisible);
+ * const {
+ *   pickRenderMedium, pickMarkerSize, pickSymbolDescriptor,
+ *   resolveAdaptiveMarkerState, resolveMapMarkerDomPortalStacking,
+ * } = useAdaptiveMarkerHelpers();
+ *
+ * // Inside your adaptive render callback:
+ * const medium = pickRenderMedium(ctx);
+ * if (medium === "symbol") return pickSymbolDescriptor(color, theme, ctx);
+ * const size  = pickMarkerSize(ctx);
+ * const state = resolveAdaptiveMarkerState({ selected, hovered });
  * ```
  */
-const useMarkerStateResolvers = () => {
+const useAdaptiveMarkerHelpers = () => {
     return react.useMemo(() => ({
-        resolveMarkerState,
-        resolveMarkerForm,
-        resolveEffectiveSize,
-        resolveMarkerDomSize,
+        pickMarkerSize,
+        pickRenderMedium,
+        pickSymbolDescriptor,
+        pickSymbolDiameter,
         resolveAdaptiveMarkerState,
-        MARKER_SIZE_MAP,
+        downgradeMarkerDomSize,
+        upgradeMarkerDomSize,
+        resolveMapMarkerDomPortalStacking,
+        DEFAULT_MARKER_SIZE_BREAKPOINTS,
+        MARKER_DISC_BORDER_WIDTH_PX,
     }), []);
 };
 
@@ -9631,6 +9656,150 @@ const useShapeLabelHelpers = () => {
     }), []);
 };
 
+/**
+ * Build-your-own hook: stable references to marker state resolution primitives.
+ *
+ * Returns a memoized object of the pure resolver functions for consumers that
+ * want to hand-roll their own MapMarker replacement while staying consistent
+ * with the library's state priority rules (selected → expanded → hovered → default).
+ *
+ * @example
+ * ```tsx
+ * const { resolveMarkerState, resolveMarkerForm } = useMarkerStateResolvers();
+ * const state = resolveMarkerState({ selected, hovered, expandedRank });
+ * const form  = resolveMarkerForm(state, labelVisible);
+ * ```
+ */
+const useMarkerStateResolvers = () => {
+    return react.useMemo(() => ({
+        resolveMarkerState,
+        resolveMarkerForm,
+        resolveEffectiveSize,
+        resolveMarkerDomSize,
+        resolveAdaptiveMarkerState,
+        MARKER_SIZE_MAP,
+    }), []);
+};
+
+/**
+ * Build-your-own hook: stable references to theme-aware marker color primitives.
+ *
+ * Returns the `defaultMarkerColorConfig` factory and `resolveMarkerColors` resolver
+ * for consumers building custom marker components that need to stay visually
+ * consistent with `MapMarker`'s pill/indicator color system.
+ *
+ * @example
+ * ```tsx
+ * const { defaultMarkerColorConfig, resolveMarkerColors } = useMarkerColors();
+ * const config  = defaultMarkerColorConfig(theme);
+ * const colors  = resolveMarkerColors(fillColor, state, theme, config);
+ * // Spread colors.cssVars onto the marker root element.
+ * ```
+ */
+const useMarkerColors = () => {
+    return react.useMemo(() => ({
+        defaultMarkerColorConfig,
+        resolveMarkerColors,
+        MARKER_DARK_PILL,
+        MARKER_LIGHT_PILL,
+    }), []);
+};
+
+const PADDING_PX = 12;
+/**
+ * Default auto-pan resolver: pans the minimum amount to give the panel the
+ * best possible screen space. Handles two cases:
+ *
+ * 1. **Clipping** — panel bleeds outside the map container on any side. Pans
+ *    to clear the bleed with 12 px of breathing room.
+ *
+ * 2. **Scroll-squish** — panel is within the container but shift-pressed against
+ *    an edge, so content overflows and the panel scrolls. Pans to give the panel
+ *    room to grow, up to the CSS `max-height` cap (`panelCssMaxHeight`).
+ *
+ * Returns `null` when the panel already fits without scrolling and without
+ * clipping — meaning no pan is needed.
+ *
+ * Pass as `resolveAutoPan` to {@link usePanel} for the standard behavior:
+ *
+ * ```tsx
+ * usePanel(api, {
+ *   id: "my-panel",
+ *   open: isOpen,
+ *   resolveAutoPan: defaultAutoPanResolver,
+ *   children: <MyPanelContent />,
+ * });
+ * ```
+ */
+const defaultAutoPanResolver = (ctx) => {
+    const { clipping, placement, panelRect, anchorRect, panelScrollHeight, panelCssMaxHeight } = ctx;
+    // --- Clipping: clear overflow past container edges ---
+    const x = clipping.right > 0 ? clipping.right + PADDING_PX : clipping.left > 0 ? -(clipping.left + PADDING_PX) : 0;
+    const clippingY = clipping.bottom > 0 ? clipping.bottom + PADDING_PX : clipping.top > 0 ? -(clipping.top + PADDING_PX) : 0;
+    // --- Scroll-squish: pan to give the panel room to stop scrolling.
+    // Cap at panelCssMaxHeight — panning further cannot reduce scrolling.
+    const squishAmount = Math.max(0, Math.min(panelScrollHeight, panelCssMaxHeight) - panelRect.height);
+    let squishY = 0;
+    if (squishAmount > 0) {
+        if (placement.startsWith("top")) {
+            // Panel is above the anchor. Move anchor down (negative y) to open space above.
+            squishY = -(squishAmount + PADDING_PX);
+        }
+        else if (placement.startsWith("bottom")) {
+            // Panel is below the anchor. Move anchor up (positive y) to open space below.
+            squishY = squishAmount + PADDING_PX;
+        }
+        else {
+            // left/right placements: panel is vertically centered on the anchor.
+            // Infer which edge shift pressed the panel against by comparing the
+            // panel's natural center position to its actual rendered top.
+            const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+            const naturalPanelTop = anchorCenterY - panelRect.height / 2;
+            const shiftDelta = panelRect.top - naturalPanelTop;
+            if (shiftDelta > 1) {
+                // Shift pressed panel down (anchor near top) — move anchor down.
+                squishY = -(squishAmount + PADDING_PX);
+            }
+            else if (shiftDelta < -1) {
+                // Shift pressed panel up (anchor near bottom) — move anchor up.
+                squishY = squishAmount + PADDING_PX;
+            }
+            // shiftDelta ≈ 0: squish is from CSS max-height alone, not position — skip.
+        }
+    }
+    // After shift, clippingY and squishY are mutually exclusive on the same axis
+    // (shift keeps the panel within container bounds). clippingY takes priority as
+    // a defensive fallback for the edge case where both are non-zero.
+    const y = clippingY || squishY;
+    if (x === 0 && y === 0)
+        return null;
+    return { x, y, restoreOnDismiss: true };
+};
+
+/**
+ * Build-your-own hook: stable reference to the default auto-pan resolver.
+ *
+ * Returns `defaultAutoPanResolver` for consumers who want to pass it to
+ * `usePanel({ resolveAutoPan })` or use it as a baseline to wrap/replace
+ * with custom logic.
+ *
+ * @example
+ * ```tsx
+ * const { defaultAutoPanResolver } = useAutoPanResolver();
+ * usePanel(api, {
+ *   id: "my-panel",
+ *   open: isOpen,
+ *   resolveAutoPan: defaultAutoPanResolver,
+ *   children: <MyContent />,
+ * });
+ * ```
+ */
+const useAutoPanResolver = () => {
+    return react.useMemo(() => ({
+        defaultAutoPanResolver,
+    }), []);
+};
+
 const VIEWPORT_BOUNDS = [-50, -50, 50, 50];
 const INITIAL_STATE = {
     center: [0, 0],
@@ -9806,6 +9975,7 @@ exports.ClusterMarker = ClusterMarker;
 exports.ClusterStick = ClusterStick;
 exports.Controls = Controls;
 exports.DEFAULT_MARKER_SIZE_BREAKPOINTS = DEFAULT_MARKER_SIZE_BREAKPOINTS;
+exports.DefaultControls = DefaultControls;
 exports.Layers = Layers;
 exports.MARKER_DARK_PILL = MARKER_DARK_PILL;
 exports.MARKER_DISC_BORDER_WIDTH_PX = MARKER_DISC_BORDER_WIDTH_PX;
@@ -9827,7 +9997,8 @@ exports.useCameraIdle = useCameraIdle;
 exports.useCameraState = useCameraState;
 exports.useClusterCountFormat = useClusterCountFormat;
 exports.useControlStack = useControlStack;
-exports.useControlsConfig = useControlsConfig;
+exports.useControls = useControls;
+exports.useDefaultControls = useDefaultControls;
 exports.useDirectionIndicator = useDirectionIndicator;
 exports.useExpandedIds = useExpandedIds;
 exports.useFitFeatureBounds = useFitFeatureBounds;