@trackunit/react-map 0.1.0 → 0.1.1

package/index.cjs.js

@@ -1670,6 +1670,20 @@ const collapseControls = (config, mode, metadata) => {
     return { navigation, settings, tools, statistics: config.statistics };
 };
 
+const RIGHT_CONTROL_POPOVER_PLACEMENT = "right-start";
+const RIGHT_CONTROL_TOOLTIP_PLACEMENT = "right";
+
+/**
+ * Wraps standalone map controls with a right-aligned tooltip when `overlaySide` is `"right"`.
+ * Callers should omit `title` on {@link IconButton} in that mode so tooltips do not stack.
+ */
+const StandaloneControlTooltip = ({ children, disabled = false, label, overlaySide = undefined, }) => {
+    if (overlaySide !== "right") {
+        return children;
+    }
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: disabled, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: children }));
+};
+
 /**
  * Shared standalone renderer for boolean controls (toggle and checkbox).
  * Both render identically as an IconButton with tooltip in standalone mode.
@@ -1678,7 +1692,7 @@ const collapseControls = (config, mode, metadata) => {
  *
  * @internal
  */
-const BooleanButton = ({ config, resolved }) => {
+const BooleanButton = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, label, onChange: onClickChange, value } = config;
     const { icon, size } = resolved;
     const [t] = useTranslation();
@@ -1686,7 +1700,8 @@ const BooleanButton = ({ config, resolved }) => {
         return null;
     }
     const tooltipLabel = t("controls.boolean.tooltip", { label });
-    return (jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": label, "aria-pressed": value, className: className, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: icon, size: "small" }), onClick: () => onClickChange(!value), size: size, title: tooltipLabel, variant: value ? "primary" : "secondary" }));
+    const useRightOverlay = overlaySide === "right";
+    return (jsxRuntime.jsx(StandaloneControlTooltip, { label: tooltipLabel, overlaySide: overlaySide, children: jsxRuntime.jsx(reactComponents.IconButton, { ...(useRightOverlay ? { ariaLabel: label } : { title: tooltipLabel }), "aria-pressed": value, className: className, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: icon, size: "small" }), onClick: () => onClickChange(!value), size: size, variant: value ? "primary" : "secondary" }) }));
 };
 
 /**
@@ -1695,13 +1710,14 @@ const BooleanButton = ({ config, resolved }) => {
  *
  * @internal
  */
-const Button = ({ config, resolved }) => {
+const Button = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, label, onClick } = config;
     const { icon, size } = resolved;
     if (icon === undefined) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": label, className: className, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: icon, size: "small" }), onClick: onClick, size: size, title: label, variant: "secondary" }));
+    const useRightOverlay = overlaySide === "right";
+    return (jsxRuntime.jsx(StandaloneControlTooltip, { label: label, overlaySide: overlaySide, children: jsxRuntime.jsx(reactComponents.IconButton, { ...(useRightOverlay ? { ariaLabel: label } : { title: label }), className: className, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: icon, size: "small" }), onClick: onClick, size: size, variant: "secondary" }) }));
 };
 
 /**
@@ -1717,7 +1733,7 @@ const Button = ({ config, resolved }) => {
  *
  * @internal
  */
-const Custom = ({ config, resolved, placement }) => {
+const Custom = ({ config, overlaySide = undefined, resolved, placement }) => {
     if (!resolved.visible) {
         return null;
     }
@@ -1730,7 +1746,7 @@ const Custom = ({ config, resolved, placement }) => {
     // A Fragment cannot accept those props — use an inert wrapper with `contents` layout.
     const wrapped = jsxRuntime.jsx("span", { className: "contents", children: content });
     const useStandaloneTooltip = placement === "standalone" && (config.autoTooltip ?? "standalone") === "standalone";
-    return useStandaloneTooltip ? (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: config.label, children: wrapped })) : (wrapped);
+    return useStandaloneTooltip ? (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: config.label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: wrapped })) : (wrapped);
 };
 
 /** Shared padding for interactive menu items (button, toggle, stepper, select, radioGroup). */
@@ -2231,14 +2247,26 @@ const MenuContent = ({ availableSpace, items, presentation }) => {
     const groups = groupItemsBySection(items);
     return (jsxRuntime.jsx("div", { className: presentation === "popover" ? "rounded-lg border border-neutral-300 bg-white py-1 shadow" : "py-1", role: "menu", children: groups.map((group, groupIndex) => (jsxRuntime.jsxs(react.Fragment, { children: [group.section !== undefined ? jsxRuntime.jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace))] }, groupIndex))) }));
 };
+/** Popover opens right; tooltip is suppressed while the menu is open. */
+const MenuRightPopover = ({ availableSpace, config, customPortalId, resolved, }) => {
+    const { className, "data-testid": dataTestId, items, label } = config;
+    const isFullScreen = reactComponents.useIsFullscreen();
+    return (jsxRuntime.jsx("div", { className: className ?? "w-fit", children: jsxRuntime.jsx(reactComponents.Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) })] })) }) }));
+};
 /** Popover presentation -- renders a MoreMenu with position-aware placement. */
-const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, resolved }) => {
+const MenuAutoPopover = ({ availableSpace, config, containerRef, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = reactComponents.useIsFullscreen();
     const triggerRef = react.useRef(null);
     const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
     return (jsxRuntime.jsx("div", { className: "w-fit", ref: triggerRef, children: jsxRuntime.jsx(reactComponents.MoreMenu, { className: className, customButton: jsxRuntime.jsx(reactComponents.IconButton, { "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) }) }));
 };
+const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    if (overlaySide === "right") {
+        return (jsxRuntime.jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
+    }
+    return (jsxRuntime.jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+};
 /** Modal presentation -- renders a Modal with no popover-specific hooks. */
 const MenuModal = ({ availableSpace, config, resolved }) => (jsxRuntime.jsx(Modal, { config: config, resolved: resolved, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: config.items, presentation: "modal" }) }));
 /**
@@ -2250,11 +2278,11 @@ const MenuModal = ({ availableSpace, config, resolved }) => (jsxRuntime.jsx(Moda
  *
  * @internal
  */
-const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, resolved, }) => {
+const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide = undefined, resolved, }) => {
     if (menuPresentation === "modal") {
         return jsxRuntime.jsx(MenuModal, { availableSpace: availableSpace, config: config, resolved: resolved });
     }
-    return (jsxRuntime.jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+    return (jsxRuntime.jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
 };
 
 const fieldConfigForStandalonePopover = (config) => {
@@ -2272,13 +2300,16 @@ const fieldConfigForStandalonePopover = (config) => {
 const RadioGroupPanel = ({ fieldConfig }) => {
     return (jsxRuntime.jsx("div", { className: "rounded-lg border border-neutral-300 bg-white px-3 py-2 shadow", children: jsxRuntime.jsx(RadioGroupField, { config: fieldConfig }) }));
 };
-const RadioGroupPopover = ({ config, containerRef, customPortalId, resolved }) => {
+const RadioGroupPopover = ({ config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
     const { className, "data-testid": dataTestId, label } = config;
     const isFullScreen = reactComponents.useIsFullscreen();
     const triggerRef = react.useRef(null);
-    // Menu path uses MenuRadioGroup (no popover). Only standalone uses MoreMenu.
-    const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
-    return (jsxRuntime.jsx("div", { className: "w-fit", ref: triggerRef, children: jsxRuntime.jsx(reactComponents.MoreMenu, { className: className, customButton: jsxRuntime.jsx(reactComponents.IconButton, { "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsxRuntime.jsx(RadioGroupPanel, { fieldConfig: fieldConfigForStandalonePopover(config) }) }) }));
+    const popoverPlacement = usePopoverPlacement(triggerRef, containerRef, { skip: overlaySide === "right" });
+    const fieldConfig = fieldConfigForStandalonePopover(config);
+    if (overlaySide === "right") {
+        return (jsxRuntime.jsx("div", { className: "w-fit", ref: triggerRef, children: jsxRuntime.jsx(reactComponents.Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsxRuntime.jsx(RadioGroupPanel, { fieldConfig: fieldConfig }) })] })) }) }));
+    }
+    return (jsxRuntime.jsx("div", { className: "w-fit", ref: triggerRef, children: jsxRuntime.jsx(reactComponents.MoreMenu, { className: className, customButton: jsxRuntime.jsx(reactComponents.IconButton, { "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsxRuntime.jsx(RadioGroupPanel, { fieldConfig: fieldConfig }) }) }));
 };
 /**
  * Standalone radio group: icon button opens a popover (`MoreMenu`).
@@ -2288,8 +2319,8 @@ const RadioGroupPopover = ({ config, containerRef, customPortalId, resolved }) =
  *
  * @internal
  */
-const RadioGroup = ({ config, containerRef, customPortalId, resolved }) => {
-    return (jsxRuntime.jsx(RadioGroupPopover, { config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+const RadioGroup = ({ config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    return (jsxRuntime.jsx(RadioGroupPopover, { config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
 };
 
 /**
@@ -2298,10 +2329,10 @@ const RadioGroup = ({ config, containerRef, customPortalId, resolved }) => {
  *
  * @internal
  */
-const Search = ({ config, resolved }) => {
+const Search = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, onClear, placeholder, value } = config;
     const { size } = resolved;
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: label, children: jsxRuntime.jsx(reactFormComponents.Search, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, onChange: event => {
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsxRuntime.jsx(reactFormComponents.Search, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, onChange: event => {
                 onChange(event.target.value);
             }, onClear: onClear, placeholder: placeholder ?? label, value: value }) }));
 };
@@ -2312,12 +2343,12 @@ const Search = ({ config, resolved }) => {
  *
  * @internal
  */
-const Select = ({ config, resolved }) => {
+const Select = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, options, value } = config;
     const { size } = resolved;
     const selectOptions = [...options];
     const selectedOption = selectOptions.find(option => option.value === value) ?? null;
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: label, children: jsxRuntime.jsx(reactFormComponents.BaseSelect, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, isSearchable: false, onChange: option => {
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsxRuntime.jsx(reactFormComponents.BaseSelect, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, isSearchable: false, onChange: option => {
                 if (option !== null) {
                     onChange(option.value);
                 }
@@ -2334,7 +2365,7 @@ const Select = ({ config, resolved }) => {
  *
  * @internal
  */
-const Stepper = ({ config, resolved }) => {
+const Stepper = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, decrement: onClickDecrement, increment: onClickIncrement, label, } = config;
     const { size } = resolved;
     const [t] = useTranslation();
@@ -2347,7 +2378,7 @@ const Stepper = ({ config, resolved }) => {
         : decrementHover.hovering
             ? `${label}, ${decreaseLabel}`
             : label;
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: tooltipLabel, children: jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("grid", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": increaseLabel, className: "rounded-b-none", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, title: increaseLabel, variant: "secondary" }), jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": decreaseLabel, className: "translate-y-[-1px] rounded-t-none", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Minus", size: "small" }), onClick: onClickDecrement, onMouseEnter: decrementHover.onMouseEnter, onMouseLeave: decrementHover.onMouseLeave, size: size, title: decreaseLabel, variant: "secondary" })] }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, label: tooltipLabel, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("grid", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": increaseLabel, className: "rounded-b-none", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, title: increaseLabel, variant: "secondary" }), jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": decreaseLabel, className: "translate-y-[-1px] rounded-t-none", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Minus", size: "small" }), onClick: onClickDecrement, onMouseEnter: decrementHover.onMouseEnter, onMouseLeave: decrementHover.onMouseLeave, size: size, title: decreaseLabel, variant: "secondary" })] }) }));
 };
 
 function assertStandaloneToggleGroupIcons(config) {
@@ -2364,7 +2395,7 @@ function assertStandaloneToggleGroupIcons(config) {
  *
  * @internal
  */
-const ToggleGroup = ({ config, resolved }) => {
+const ToggleGroup = ({ config, overlaySide: _overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, disabled, label, onChange, options, value } = config;
     assertStandaloneToggleGroupIcons(config);
     return (jsxRuntime.jsx("div", { "aria-label": label, className: tailwindMerge.twMerge("w-fit", className), "data-testid": dataTestId, role: "group", children: jsxRuntime.jsx("div", { className: "relative after:pointer-events-none after:absolute after:inset-0 after:rounded-md after:ring-1 after:ring-inset after:ring-neutral-300 after:content-['']", children: jsxRuntime.jsx(ToggleGroupField, { config: {
@@ -2382,28 +2413,28 @@ const ToggleGroup = ({ config, resolved }) => {
  *
  * @internal
  */
-const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, }) => {
+const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide = undefined, }) => {
     const resolved = resolveControl(control, { placement: "standalone", availableSpace });
     switch (control.type) {
         case "button":
-            return jsxRuntime.jsx(Button, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(Button, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "stepper":
-            return jsxRuntime.jsx(Stepper, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(Stepper, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "toggle":
         case "checkbox":
-            return jsxRuntime.jsx(BooleanButton, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(BooleanButton, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "select":
-            return jsxRuntime.jsx(Select, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(Select, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "search":
-            return jsxRuntime.jsx(Search, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(Search, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "radioGroup":
-            return (jsxRuntime.jsx(RadioGroup, { config: control, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+            return (jsxRuntime.jsx(RadioGroup, { config: control, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
         case "toggleGroup":
-            return jsxRuntime.jsx(ToggleGroup, { config: control, resolved: resolved });
+            return jsxRuntime.jsx(ToggleGroup, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "menu":
-            return (jsxRuntime.jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, resolved: resolved }));
+            return (jsxRuntime.jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, overlaySide: overlaySide, resolved: resolved }));
         case "custom":
-            return jsxRuntime.jsx(Custom, { config: control, placement: "standalone", resolved: resolved });
+            return jsxRuntime.jsx(Custom, { config: control, overlaySide: overlaySide, placement: "standalone", resolved: resolved });
         default: {
             const exhaustiveCheck = control;
             throw new Error(`Unknown control type: ${exhaustiveCheck}`);
@@ -2477,10 +2508,10 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
         "pointer-events-none", 
         // Layout grid for semantic areas
         "grid h-full w-full", 
-        // Responsive grid: navigation bottom-right, settings top-left, statistics bottom-left
+        // Responsive grid: navigation bottom-right, settings top-left, tools top-right, 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] }));
+        "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 self-end justify-self-end", 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, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "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, 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

package/index.esm.js

@@ -4,7 +4,7 @@ import { INITIAL_CAMERA_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD
 export { ANCHOR_SELECTOR, DEFAULT_MAP_APPEARANCE, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, computeMarkerDomPortalZIndex, defineAdapter, geometryTypeToShapeType, mapAppearanceSchema, mapThemeSchema, mapTypeSchema } from '@trackunit/react-map-adapter-shared';
 import { useSyncExternalStore, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect, useReducer, createContext, useContext, memo, Suspense, useId, Fragment as Fragment$1, forwardRef } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useMergeRefs, IconButton, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, Tooltip, ToggleGroup as ToggleGroup$1, useIsFullscreen, MoreMenu, useHover as useHover$1, cvaInteractableItem, useLocalStorageReducer } from '@trackunit/react-components';
+import { useMergeRefs, IconButton, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, Tooltip, ToggleGroup as ToggleGroup$1, useIsFullscreen, Popover, PopoverTrigger, PopoverContent, MoreMenu, useHover as useHover$1, cvaInteractableItem, useLocalStorageReducer } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { useFloating, autoUpdate, offset, flip, useHover, safePolygon, useInteractions, shift, hide, useDismiss, useRole } from '@floating-ui/react';
 import { createPortal } from 'react-dom';
@@ -1669,6 +1669,20 @@ const collapseControls = (config, mode, metadata) => {
     return { navigation, settings, tools, statistics: config.statistics };
 };
 
+const RIGHT_CONTROL_POPOVER_PLACEMENT = "right-start";
+const RIGHT_CONTROL_TOOLTIP_PLACEMENT = "right";
+
+/**
+ * Wraps standalone map controls with a right-aligned tooltip when `overlaySide` is `"right"`.
+ * Callers should omit `title` on {@link IconButton} in that mode so tooltips do not stack.
+ */
+const StandaloneControlTooltip = ({ children, disabled = false, label, overlaySide = undefined, }) => {
+    if (overlaySide !== "right") {
+        return children;
+    }
+    return (jsx(Tooltip, { delayed: true, disabled: disabled, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: children }));
+};
+
 /**
  * Shared standalone renderer for boolean controls (toggle and checkbox).
  * Both render identically as an IconButton with tooltip in standalone mode.
@@ -1677,7 +1691,7 @@ const collapseControls = (config, mode, metadata) => {
  *
  * @internal
  */
-const BooleanButton = ({ config, resolved }) => {
+const BooleanButton = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, label, onChange: onClickChange, value } = config;
     const { icon, size } = resolved;
     const [t] = useTranslation();
@@ -1685,7 +1699,8 @@ const BooleanButton = ({ config, resolved }) => {
         return null;
     }
     const tooltipLabel = t("controls.boolean.tooltip", { label });
-    return (jsx(IconButton, { "aria-label": label, "aria-pressed": value, className: className, "data-testid": dataTestId, icon: jsx(Icon, { name: icon, size: "small" }), onClick: () => onClickChange(!value), size: size, title: tooltipLabel, variant: value ? "primary" : "secondary" }));
+    const useRightOverlay = overlaySide === "right";
+    return (jsx(StandaloneControlTooltip, { label: tooltipLabel, overlaySide: overlaySide, children: jsx(IconButton, { ...(useRightOverlay ? { ariaLabel: label } : { title: tooltipLabel }), "aria-pressed": value, className: className, "data-testid": dataTestId, icon: jsx(Icon, { name: icon, size: "small" }), onClick: () => onClickChange(!value), size: size, variant: value ? "primary" : "secondary" }) }));
 };
 
 /**
@@ -1694,13 +1709,14 @@ const BooleanButton = ({ config, resolved }) => {
  *
  * @internal
  */
-const Button = ({ config, resolved }) => {
+const Button = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, label, onClick } = config;
     const { icon, size } = resolved;
     if (icon === undefined) {
         return null;
     }
-    return (jsx(IconButton, { "aria-label": label, className: className, "data-testid": dataTestId, icon: jsx(Icon, { name: icon, size: "small" }), onClick: onClick, size: size, title: label, variant: "secondary" }));
+    const useRightOverlay = overlaySide === "right";
+    return (jsx(StandaloneControlTooltip, { label: label, overlaySide: overlaySide, children: jsx(IconButton, { ...(useRightOverlay ? { ariaLabel: label } : { title: label }), className: className, "data-testid": dataTestId, icon: jsx(Icon, { name: icon, size: "small" }), onClick: onClick, size: size, variant: "secondary" }) }));
 };
 
 /**
@@ -1716,7 +1732,7 @@ const Button = ({ config, resolved }) => {
  *
  * @internal
  */
-const Custom = ({ config, resolved, placement }) => {
+const Custom = ({ config, overlaySide = undefined, resolved, placement }) => {
     if (!resolved.visible) {
         return null;
     }
@@ -1729,7 +1745,7 @@ const Custom = ({ config, resolved, placement }) => {
     // A Fragment cannot accept those props — use an inert wrapper with `contents` layout.
     const wrapped = jsx("span", { className: "contents", children: content });
     const useStandaloneTooltip = placement === "standalone" && (config.autoTooltip ?? "standalone") === "standalone";
-    return useStandaloneTooltip ? (jsx(Tooltip, { delayed: true, label: config.label, children: wrapped })) : (wrapped);
+    return useStandaloneTooltip ? (jsx(Tooltip, { delayed: true, label: config.label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: wrapped })) : (wrapped);
 };
 
 /** Shared padding for interactive menu items (button, toggle, stepper, select, radioGroup). */
@@ -2230,14 +2246,26 @@ const MenuContent = ({ availableSpace, items, presentation }) => {
     const groups = groupItemsBySection(items);
     return (jsx("div", { className: presentation === "popover" ? "rounded-lg border border-neutral-300 bg-white py-1 shadow" : "py-1", role: "menu", children: groups.map((group, groupIndex) => (jsxs(Fragment$1, { children: [group.section !== undefined ? jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace))] }, groupIndex))) }));
 };
+/** Popover opens right; tooltip is suppressed while the menu is open. */
+const MenuRightPopover = ({ availableSpace, config, customPortalId, resolved, }) => {
+    const { className, "data-testid": dataTestId, items, label } = config;
+    const isFullScreen = useIsFullscreen();
+    return (jsx("div", { className: className ?? "w-fit", children: jsx(Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxs(Fragment$1, { children: [jsx(PopoverTrigger, { children: jsx(Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsx(IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsx(PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) })] })) }) }));
+};
 /** Popover presentation -- renders a MoreMenu with position-aware placement. */
-const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, resolved }) => {
+const MenuAutoPopover = ({ availableSpace, config, containerRef, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = useIsFullscreen();
     const triggerRef = useRef(null);
     const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
     return (jsx("div", { className: "w-fit", ref: triggerRef, children: jsx(MoreMenu, { className: className, customButton: jsx(IconButton, { "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) }) }));
 };
+const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    if (overlaySide === "right") {
+        return (jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
+    }
+    return (jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+};
 /** Modal presentation -- renders a Modal with no popover-specific hooks. */
 const MenuModal = ({ availableSpace, config, resolved }) => (jsx(Modal, { config: config, resolved: resolved, children: jsx(MenuContent, { availableSpace: availableSpace, items: config.items, presentation: "modal" }) }));
 /**
@@ -2249,11 +2277,11 @@ const MenuModal = ({ availableSpace, config, resolved }) => (jsx(Modal, { config
  *
  * @internal
  */
-const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, resolved, }) => {
+const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide = undefined, resolved, }) => {
     if (menuPresentation === "modal") {
         return jsx(MenuModal, { availableSpace: availableSpace, config: config, resolved: resolved });
     }
-    return (jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+    return (jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
 };
 
 const fieldConfigForStandalonePopover = (config) => {
@@ -2271,13 +2299,16 @@ const fieldConfigForStandalonePopover = (config) => {
 const RadioGroupPanel = ({ fieldConfig }) => {
     return (jsx("div", { className: "rounded-lg border border-neutral-300 bg-white px-3 py-2 shadow", children: jsx(RadioGroupField, { config: fieldConfig }) }));
 };
-const RadioGroupPopover = ({ config, containerRef, customPortalId, resolved }) => {
+const RadioGroupPopover = ({ config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
     const { className, "data-testid": dataTestId, label } = config;
     const isFullScreen = useIsFullscreen();
     const triggerRef = useRef(null);
-    // Menu path uses MenuRadioGroup (no popover). Only standalone uses MoreMenu.
-    const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
-    return (jsx("div", { className: "w-fit", ref: triggerRef, children: jsx(MoreMenu, { className: className, customButton: jsx(IconButton, { "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsx(RadioGroupPanel, { fieldConfig: fieldConfigForStandalonePopover(config) }) }) }));
+    const popoverPlacement = usePopoverPlacement(triggerRef, containerRef, { skip: overlaySide === "right" });
+    const fieldConfig = fieldConfigForStandalonePopover(config);
+    if (overlaySide === "right") {
+        return (jsx("div", { className: "w-fit", ref: triggerRef, children: jsx(Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxs(Fragment$1, { children: [jsx(PopoverTrigger, { children: jsx(Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsx(IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsx(PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsx(RadioGroupPanel, { fieldConfig: fieldConfig }) })] })) }) }));
+    }
+    return (jsx("div", { className: "w-fit", ref: triggerRef, children: jsx(MoreMenu, { className: className, customButton: jsx(IconButton, { "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "EllipsisHorizontal", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsx(RadioGroupPanel, { fieldConfig: fieldConfig }) }) }));
 };
 /**
  * Standalone radio group: icon button opens a popover (`MoreMenu`).
@@ -2287,8 +2318,8 @@ const RadioGroupPopover = ({ config, containerRef, customPortalId, resolved }) =
  *
  * @internal
  */
-const RadioGroup = ({ config, containerRef, customPortalId, resolved }) => {
-    return (jsx(RadioGroupPopover, { config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+const RadioGroup = ({ config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    return (jsx(RadioGroupPopover, { config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
 };
 
 /**
@@ -2297,10 +2328,10 @@ const RadioGroup = ({ config, containerRef, customPortalId, resolved }) => {
  *
  * @internal
  */
-const Search = ({ config, resolved }) => {
+const Search = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, onClear, placeholder, value } = config;
     const { size } = resolved;
-    return (jsx(Tooltip, { delayed: true, label: label, children: jsx(Search$1, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, onChange: event => {
+    return (jsx(Tooltip, { delayed: true, label: label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsx(Search$1, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, onChange: event => {
                 onChange(event.target.value);
             }, onClear: onClear, placeholder: placeholder ?? label, value: value }) }));
 };
@@ -2311,12 +2342,12 @@ const Search = ({ config, resolved }) => {
  *
  * @internal
  */
-const Select = ({ config, resolved }) => {
+const Select = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, options, value } = config;
     const { size } = resolved;
     const selectOptions = [...options];
     const selectedOption = selectOptions.find(option => option.value === value) ?? null;
-    return (jsx(Tooltip, { delayed: true, label: label, children: jsx(BaseSelect, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, isSearchable: false, onChange: option => {
+    return (jsx(Tooltip, { delayed: true, label: label, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsx(BaseSelect, { "aria-label": label, className: className, "data-testid": dataTestId, fieldSize: size, id: id, isSearchable: false, onChange: option => {
                 if (option !== null) {
                     onChange(option.value);
                 }
@@ -2333,7 +2364,7 @@ const Select = ({ config, resolved }) => {
  *
  * @internal
  */
-const Stepper = ({ config, resolved }) => {
+const Stepper = ({ config, overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, decrement: onClickDecrement, increment: onClickIncrement, label, } = config;
     const { size } = resolved;
     const [t] = useTranslation();
@@ -2346,7 +2377,7 @@ const Stepper = ({ config, resolved }) => {
         : decrementHover.hovering
             ? `${label}, ${decreaseLabel}`
             : label;
-    return (jsx(Tooltip, { delayed: true, label: tooltipLabel, children: jsxs("div", { className: twMerge("grid", className), "data-testid": dataTestId, children: [jsx(IconButton, { "aria-label": increaseLabel, className: "rounded-b-none", icon: jsx(Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, title: increaseLabel, variant: "secondary" }), jsx(IconButton, { "aria-label": decreaseLabel, className: "translate-y-[-1px] rounded-t-none", icon: jsx(Icon, { name: "Minus", size: "small" }), onClick: onClickDecrement, onMouseEnter: decrementHover.onMouseEnter, onMouseLeave: decrementHover.onMouseLeave, size: size, title: decreaseLabel, variant: "secondary" })] }) }));
+    return (jsx(Tooltip, { delayed: true, label: tooltipLabel, placement: overlaySide === "right" ? RIGHT_CONTROL_TOOLTIP_PLACEMENT : undefined, children: jsxs("div", { className: twMerge("grid", className), "data-testid": dataTestId, children: [jsx(IconButton, { "aria-label": increaseLabel, className: "rounded-b-none", icon: jsx(Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, title: increaseLabel, variant: "secondary" }), jsx(IconButton, { "aria-label": decreaseLabel, className: "translate-y-[-1px] rounded-t-none", icon: jsx(Icon, { name: "Minus", size: "small" }), onClick: onClickDecrement, onMouseEnter: decrementHover.onMouseEnter, onMouseLeave: decrementHover.onMouseLeave, size: size, title: decreaseLabel, variant: "secondary" })] }) }));
 };
 
 function assertStandaloneToggleGroupIcons(config) {
@@ -2363,7 +2394,7 @@ function assertStandaloneToggleGroupIcons(config) {
  *
  * @internal
  */
-const ToggleGroup = ({ config, resolved }) => {
+const ToggleGroup = ({ config, overlaySide: _overlaySide = undefined, resolved }) => {
     const { className, "data-testid": dataTestId, disabled, label, onChange, options, value } = config;
     assertStandaloneToggleGroupIcons(config);
     return (jsx("div", { "aria-label": label, className: twMerge("w-fit", className), "data-testid": dataTestId, role: "group", children: jsx("div", { className: "relative after:pointer-events-none after:absolute after:inset-0 after:rounded-md after:ring-1 after:ring-inset after:ring-neutral-300 after:content-['']", children: jsx(ToggleGroupField, { config: {
@@ -2381,28 +2412,28 @@ const ToggleGroup = ({ config, resolved }) => {
  *
  * @internal
  */
-const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, }) => {
+const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide = undefined, }) => {
     const resolved = resolveControl(control, { placement: "standalone", availableSpace });
     switch (control.type) {
         case "button":
-            return jsx(Button, { config: control, resolved: resolved });
+            return jsx(Button, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "stepper":
-            return jsx(Stepper, { config: control, resolved: resolved });
+            return jsx(Stepper, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "toggle":
         case "checkbox":
-            return jsx(BooleanButton, { config: control, resolved: resolved });
+            return jsx(BooleanButton, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "select":
-            return jsx(Select, { config: control, resolved: resolved });
+            return jsx(Select, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "search":
-            return jsx(Search, { config: control, resolved: resolved });
+            return jsx(Search, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "radioGroup":
-            return (jsx(RadioGroup, { config: control, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
+            return (jsx(RadioGroup, { config: control, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
         case "toggleGroup":
-            return jsx(ToggleGroup, { config: control, resolved: resolved });
+            return jsx(ToggleGroup, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "menu":
-            return (jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, resolved: resolved }));
+            return (jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, overlaySide: overlaySide, resolved: resolved }));
         case "custom":
-            return jsx(Custom, { config: control, placement: "standalone", resolved: resolved });
+            return jsx(Custom, { config: control, overlaySide: overlaySide, placement: "standalone", resolved: resolved });
         default: {
             const exhaustiveCheck = control;
             throw new Error(`Unknown control type: ${exhaustiveCheck}`);
@@ -2476,10 +2507,10 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
         "pointer-events-none", 
         // Layout grid for semantic areas
         "grid h-full w-full", 
-        // Responsive grid: navigation bottom-right, settings top-left, statistics bottom-left
+        // Responsive grid: navigation bottom-right, settings top-left, tools top-right, 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 ? (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 => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasNavigationControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1", children: navigation.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (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 => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxs("div", { className: 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 ? (jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (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 => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null] })) : null] }));
+        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1 self-end justify-self-end", children: navigation.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (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 => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxs("div", { className: 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 ? (jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (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 => (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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/controls/ControlRenderer.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentRef, RefObject } from "react";
+import type { ControlOverlaySide } from "./controlOverlaySide";
 import { type AvailableSpace } from "./renderingRules";
 import type { ControlConfig, MenuPresentation } from "./types";
 type ControlRendererProps = Readonly<{
@@ -8,6 +9,7 @@ type ControlRendererProps = Readonly<{
     control: ControlConfig;
     customPortalId?: string;
     menuPresentation: MenuPresentation;
+    overlaySide?: ControlOverlaySide;
 }>;
 /**
  * Renders a control based on its type using exhaustive switch.
@@ -16,5 +18,5 @@ type ControlRendererProps = Readonly<{
  *
  * @internal
  */
-export declare const ControlRenderer: ({ availableSpace, containerRef, control, customPortalId, menuPresentation, }: ControlRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlRenderer: ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide, }: ControlRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/controlOverlaySide.d.ts

@@ -0,0 +1,4 @@
+/** Controls in edge zones where overlays should open toward the map interior. */
+export type ControlOverlaySide = "right";
+export declare const RIGHT_CONTROL_POPOVER_PLACEMENT: "right-start";
+export declare const RIGHT_CONTROL_TOOLTIP_PLACEMENT: "right";

package/src/controls/renderers/boolean/BooleanButton.d.ts

@@ -1,7 +1,9 @@
+import type { ControlOverlaySide } from "../../controlOverlaySide";
 import type { ResolvedControlProps } from "../../renderingRules";
 import type { BooleanControlConfig } from "../../types";
 type BooleanButtonProps = Readonly<{
     config: BooleanControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -12,5 +14,5 @@ type BooleanButtonProps = Readonly<{
  *
  * @internal
  */
-export declare const BooleanButton: ({ config, resolved }: BooleanButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BooleanButton: ({ config, overlaySide, resolved }: BooleanButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/controls/renderers/button/Button.d.ts

@@ -1,7 +1,9 @@
+import type { ControlOverlaySide } from "../../controlOverlaySide";
 import { type ResolvedControlProps } from "../../renderingRules";
 import type { ButtonControlConfig } from "../../types";
 type ButtonProps = Readonly<{
     config: ButtonControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -10,5 +12,5 @@ type ButtonProps = Readonly<{
  *
  * @internal
  */
-export declare const Button: ({ config, resolved }: ButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Button: ({ config, overlaySide, resolved }: ButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/controls/renderers/custom/Custom.d.ts

@@ -1,7 +1,9 @@
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import { type ResolvedControlProps } from "../../renderingRules";
 import type { CustomControlConfig, Placement } from "../../types";
 type CustomProps = Readonly<{
     config: CustomControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
     placement: Placement;
 }>;
@@ -18,5 +20,5 @@ type CustomProps = Readonly<{
  *
  * @internal
  */
-export declare const Custom: ({ config, resolved, placement }: CustomProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Custom: ({ config, overlaySide, resolved, placement }: CustomProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/controls/renderers/menu/Menu.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentRef, type RefObject } from "react";
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import { type AvailableSpace, type ResolvedControlProps } from "../../renderingRules";
 import type { MenuControlConfig, MenuPresentation } from "../../types";
 type MenuProps = Readonly<{
@@ -8,6 +9,7 @@ type MenuProps = Readonly<{
     containerRef: RefObject<ComponentRef<"div"> | null>;
     customPortalId?: string;
     menuPresentation: MenuPresentation;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -19,5 +21,5 @@ type MenuProps = Readonly<{
  *
  * @internal
  */
-export declare const Menu: ({ availableSpace, config, containerRef, customPortalId, menuPresentation, resolved, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide, resolved, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/radio-group/RadioGroup.d.ts

@@ -1,10 +1,12 @@
 import { type ComponentRef, type RefObject } from "react";
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import type { ResolvedControlProps } from "../../renderingRules";
 import type { RadioGroupControlConfig } from "../../types";
 type RadioGroupProps = Readonly<{
     config: RadioGroupControlConfig;
     containerRef: RefObject<ComponentRef<"div"> | null>;
     customPortalId?: string;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -15,5 +17,5 @@ type RadioGroupProps = Readonly<{
  *
  * @internal
  */
-export declare const RadioGroup: ({ config, containerRef, customPortalId, resolved }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ config, containerRef, customPortalId, overlaySide, resolved, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/search/Search.d.ts

@@ -1,7 +1,9 @@
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import type { ResolvedControlProps } from "../../renderingRules";
 import type { SearchControlConfig } from "../../types";
 type SearchProps = Readonly<{
     config: SearchControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -10,5 +12,5 @@ type SearchProps = Readonly<{
  *
  * @internal
  */
-export declare const Search: ({ config, resolved }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ config, overlaySide, resolved }: SearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/select/Select.d.ts

@@ -1,7 +1,9 @@
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import type { ResolvedControlProps } from "../../renderingRules";
 import type { SelectControlConfig } from "../../types";
 type SelectProps = Readonly<{
     config: SelectControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -10,5 +12,5 @@ type SelectProps = Readonly<{
  *
  * @internal
  */
-export declare const Select: ({ config, resolved }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ config, overlaySide, resolved }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/shared/StandaloneControlTooltip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ControlOverlaySide } from "../../controlOverlaySide";
+type StandaloneControlTooltipProps = Readonly<{
+    children: ReactElement;
+    disabled?: boolean;
+    label: string;
+    overlaySide?: ControlOverlaySide;
+}>;
+/**
+ * Wraps standalone map controls with a right-aligned tooltip when `overlaySide` is `"right"`.
+ * Callers should omit `title` on {@link IconButton} in that mode so tooltips do not stack.
+ */
+export declare const StandaloneControlTooltip: ({ children, disabled, label, overlaySide, }: StandaloneControlTooltipProps) => ReactNode;
+export {};

package/src/controls/renderers/stepper/Stepper.d.ts

@@ -1,7 +1,9 @@
+import { type ControlOverlaySide } from "../../controlOverlaySide";
 import { type ResolvedControlProps } from "../../renderingRules";
 import type { StepperControlConfig } from "../../types";
 type StepperProps = Readonly<{
     config: StepperControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -14,5 +16,5 @@ type StepperProps = Readonly<{
  *
  * @internal
  */
-export declare const Stepper: ({ config, resolved }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ config, overlaySide, resolved }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/toggle-group/ToggleGroup.d.ts

@@ -1,7 +1,9 @@
+import type { ControlOverlaySide } from "../../controlOverlaySide";
 import type { ResolvedControlProps } from "../../renderingRules";
 import type { ToggleGroupControlConfig } from "../../types";
 type ToggleGroupProps = Readonly<{
     config: ToggleGroupControlConfig;
+    overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -11,5 +13,5 @@ type ToggleGroupProps = Readonly<{
  *
  * @internal
  */
-export declare const ToggleGroup: ({ config, resolved }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: ({ config, overlaySide: _overlaySide, resolved }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/types.d.ts

@@ -315,7 +315,7 @@ export type SettingsConfig = Readonly<{
 export type StatisticsConfig = Readonly<{
     controls: ReadonlyArray<ControlConfig>;
 }>;
-/** Tools area - array of controls */
+/** Tools area - array of controls (top-right on the map) */
 export type ToolsConfig = Readonly<{
     controls: ReadonlyArray<ControlConfig>;
 }>;
@@ -325,7 +325,7 @@ export type ControlsConfig = Readonly<{
     navigation: NavigationConfig;
     /** Settings: layer toggles, layer settings (future), map style (future) */
     settings: SettingsConfig;
-    /** Tools: drawing, measurement, selection (future) */
+    /** Tools: top-right controls (e.g. find address, drawing, measurement) */
     tools: ToolsConfig;
     /** Statistics: data summaries, counts */
     statistics: StatisticsConfig;