@trackunit/react-map 0.2.33-alpha-288640a1f26.0 → 0.2.36

package/index.cjs.js

@@ -59,22 +59,22 @@ const translations = {
     default: defaultTranslations,
     languages: {
         de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
-        da: () => Promise.resolve().then(function () { return require('./translation2.cjs.js'); }),
-        cs: () => Promise.resolve().then(function () { return require('./translation3.cjs.js'); }),
-        nl: () => Promise.resolve().then(function () { return require('./translation4.cjs.js'); }),
-        fr: () => Promise.resolve().then(function () { return require('./translation5.cjs.js'); }),
-        fi: () => Promise.resolve().then(function () { return require('./translation6.cjs.js'); }),
-        hu: () => Promise.resolve().then(function () { return require('./translation7.cjs.js'); }),
-        it: () => Promise.resolve().then(function () { return require('./translation8.cjs.js'); }),
-        nb: () => Promise.resolve().then(function () { return require('./translation9.cjs.js'); }),
-        pl: () => Promise.resolve().then(function () { return require('./translation10.cjs.js'); }),
-        pt: () => Promise.resolve().then(function () { return require('./translation11.cjs.js'); }),
-        ru: () => Promise.resolve().then(function () { return require('./translation12.cjs.js'); }),
-        ro: () => Promise.resolve().then(function () { return require('./translation13.cjs.js'); }),
-        es: () => Promise.resolve().then(function () { return require('./translation14.cjs.js'); }),
-        sv: () => Promise.resolve().then(function () { return require('./translation15.cjs.js'); }),
-        ja: () => Promise.resolve().then(function () { return require('./translation16.cjs.js'); }),
-        th: () => Promise.resolve().then(function () { return require('./translation17.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
 /**
@@ -1579,14 +1579,43 @@ const usePreviewMap = (adapterConfig, options) => {
     return react.useMemo(() => ({ Map, ready }), [Map, ready]);
 };
 
+/** Shared separator between control/category blocks. */
+const SEPARATOR = { type: "separator" };
 // ============================================================================
 // Overflow Behavior Helper
 // ============================================================================
 /** Resolve a control's overflow behavior, defaulting to "menu". */
 const resolveOverflow = (control) => control.overflowBehavior ?? "menu";
-/** Filter out controls that should be hidden (not menued) when collapsing. */
+/** Filter out controls that opted out of menuing with `overflowBehavior: "hide"`. */
 const excludeHidden = (controls) => controls.filter(c => resolveOverflow(c) !== "hide");
 // ============================================================================
+// Section name as a Fallback Header
+// ============================================================================
+/**
+ * Fallback `section` across the block's leading run of items that declare none of their
+ * own -- from the first non-separator item up to the first separator or the first item
+ * with its own `section` (ADR 0027).
+ *
+ * The whole run gets it so the header and the items it visually claims land in one
+ * `groupItemsBySection` group. The run stops at a separator because a separator always
+ * starts a new group, so carrying the section past one would repeat the header.
+ */
+const applyFallbackSectionAsHeader = (items, section) => {
+    const runStart = items.findIndex(item => item.type !== "separator");
+    const firstItem = items[runStart];
+    if (firstItem === undefined || firstItem.type === "separator" || firstItem.section !== undefined)
+        return items;
+    const runEndOffset = items
+        .slice(runStart + 1)
+        .findIndex(item => item.type === "separator" || item.section !== undefined);
+    const runEnd = runEndOffset === -1 ? items.length : runStart + 1 + runEndOffset;
+    return items.map((item, index) => {
+        if (index < runStart || index >= runEnd || item.type === "separator")
+            return item;
+        return { ...item, section };
+    });
+};
+// ============================================================================
 // Control-to-MenuItem Conversion
 // ============================================================================
 /**
@@ -1596,10 +1625,10 @@ const excludeHidden = (controls) => controls.filter(c => resolveOverflow(c) !==
  * One special case:
  * - **Menu** → flattens its items into the parent (menus cannot nest)
  *
- * When `section` is provided, it is set on each output item (except separators
- * which don't support sections).
+ * Items keep whatever `section` their author declared. The category label is
+ * applied later, once per block, by {@link applyFallbackSectionAsHeader}.
  */
-const controlToMenuItems = (control, section) => {
+const controlToMenuItems = (control) => {
     switch (control.type) {
         case "button":
         case "toggle":
@@ -1610,14 +1639,10 @@ const controlToMenuItems = (control, section) => {
         case "search":
         case "custom":
         case "stepper":
-            return [section !== undefined ? { ...control, section } : control];
+            return [control];
         case "menu":
-            // Flatten the menu's items into the parent, applying section to each
-            return control.items.map(item => {
-                if (item.type === "separator")
-                    return item;
-                return section !== undefined ? { ...item, section } : item;
-            });
+            // Menus cannot nest -- flatten the menu's items into the parent
+            return control.items;
         default: {
             const exhaustiveCheck = control;
             throw new Error(`Unknown control type: ${exhaustiveCheck}`);
@@ -1625,6 +1650,60 @@ const controlToMenuItems = (control, section) => {
     }
 };
 // ============================================================================
+// Flattening a Set of Controls Into One Menu
+// ============================================================================
+/**
+ * Trim edge separators and collapse runs (so authored separators do not double up
+ * against delimiters from {@link flattenControlsToMenuItems}).
+ */
+const normalizeSeparators = (items) => {
+    const normalized = items.reduce((accumulated, item) => {
+        if (item.type !== "separator")
+            return [...accumulated, item];
+        if (accumulated.length === 0 || accumulated.at(-1)?.type === "separator")
+            return accumulated;
+        return [...accumulated, SEPARATOR];
+    }, []);
+    return normalized.at(-1)?.type === "separator" ? normalized.slice(0, -1) : normalized;
+};
+/**
+ * Whether a control type renders as one row inside a menu: two adjacent single-row
+ * controls skip the separator between them, anything else is delimited (ADR 0027).
+ *
+ * Total `Record` so a new `ControlConfig` type fails compile until classified.
+ */
+const RENDERS_AS_SINGLE_ROW = {
+    button: true,
+    checkbox: true,
+    stepper: true,
+    toggle: true,
+    custom: false,
+    menu: false,
+    radioGroup: false,
+    search: false,
+    select: false,
+    toggleGroup: false,
+};
+const isSingleRowControl = (control) => RENDERS_AS_SINGLE_ROW[control.type];
+/**
+ * Flatten controls into one menu's items, preserving declared order (ADR 0022).
+ *
+ * Separator between adjacent controls unless both render as a single row
+ * ({@link RENDERS_AS_SINGLE_ROW}). Empty/separator-only controls contribute no
+ * control block (ADR 0027).
+ */
+const flattenControlsToMenuItems = (controls) => {
+    const controlBlocks = controls
+        .map(control => ({ isSingleRow: isSingleRowControl(control), items: controlToMenuItems(control) }))
+        .filter(controlBlock => controlBlock.items.some(item => item.type !== "separator"));
+    const flattened = controlBlocks.flatMap((controlBlock, index) => {
+        const previousBlock = controlBlocks[index - 1];
+        const needsSeparator = previousBlock !== undefined && !(previousBlock.isSingleRow && controlBlock.isSingleRow);
+        return needsSeparator ? [SEPARATOR, ...controlBlock.items] : controlBlock.items;
+    });
+    return normalizeSeparators(flattened);
+};
+// ============================================================================
 // Category Collapsing (categorized mode)
 // ============================================================================
 /**
@@ -1640,7 +1719,7 @@ const collapseCategory = (controls, categoryKey, meta) => {
         return controls;
     // Exclude controls that prefer hiding over being menued
     const menuable = excludeHidden(controls);
-    const menuItems = menuable.flatMap(control => controlToMenuItems(control));
+    const menuItems = flattenControlsToMenuItems(menuable);
     // If nothing remains after filtering, return empty
     if (menuItems.length === 0)
         return [];
@@ -1657,21 +1736,17 @@ const collapseCategory = (controls, categoryKey, meta) => {
     return [menu];
 };
 /**
- * Collects all controls from all categories into a single menu with
- * named sections per category.
+ * Merge all categories into one menu. Non-empty category blocks are
+ * separator-delimited; labels via {@link applyFallbackSectionAsHeader}.
  *
  * Controls with `overflowBehavior: "hide"` are excluded and fully hidden.
  */
 const collapseAll = (categories, allControls) => {
-    const allItems = [];
-    for (const { label, controls } of categories) {
-        if (controls.length === 0)
-            continue;
+    const categoryBlocks = categories
         // Exclude controls that prefer hiding over being menued
-        const menuable = excludeHidden(controls);
-        const items = menuable.flatMap(control => controlToMenuItems(control, label));
-        allItems.push(...items);
-    }
+        .map(({ label, controls }) => applyFallbackSectionAsHeader(flattenControlsToMenuItems(excludeHidden(controls)), label))
+        .filter(items => items.length > 0);
+    const allItems = categoryBlocks.flatMap((items, index) => (index === 0 ? items : [SEPARATOR, ...items]));
     // Nothing to show
     if (allItems.length === 0) {
         return {
@@ -1706,7 +1781,9 @@ const collapseAll = (categories, allControls) => {
  * - `"full"` -- pass through unchanged
  * - `"categorized"` -- group controls within each category into a per-category
  *   menu (only when >1 control in that category)
- * - `"collapsed"` -- merge all controls into a single menu with named sections
+ * - `"collapsed"` -- merge all controls into a single menu, separator-delimited per
+ *   category. Items keep their own `section`; the category name only heads a block whose
+ *   leading items declare none (ADR 0027)
  *
  * This operates at the config level, before controls enter the middleware
  * rendering pipeline. Existing renderers handle the resulting menus with no
@@ -2291,6 +2368,9 @@ const renderMenuItem = (item, index, availableSpace, customPortalId, isFullScree
 const groupItemsBySection = (items) => {
     const groups = [];
     for (const item of items) {
+        // Separators get their own group so they delimit rather than join one: a separator declares no
+        // `section`, so without this branch its `undefined` matches the preceding sectionless group and
+        // `[a, separator, b]` would collapse from three groups into one holding all three.
         if (item.type === "separator") {
             groups.push({ section: undefined, items: [item] });
             continue;
@@ -2440,7 +2520,7 @@ const Stepper = ({ config, overlaySide = undefined, resolved }) => {
         : decrementHover.hovering
             ? `${label}, ${decreaseLabel}`
             : label;
-    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" })] }) }));
+    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, { ariaLabel: increaseLabel, className: "rounded-b-none", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, variant: "secondary" }), jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: 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, variant: "secondary" })] }) }));
 };
 
 function assertStandaloneToggleGroupIcons(config) {
@@ -2667,7 +2747,7 @@ const AppearancePreview = ({ adapterConfig, mapType, label, selected, onSelect,
  *
  * @internal
  */
-const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMapType, onChange, }) => {
+const AppearancePreviewGrid = ({ adapterConfig, ariaLabel, options, currentTheme, currentMapType, onChange, }) => {
     const derivedConfigs = react.useMemo(() => {
         const configs = new Map();
         for (const option of options) {
@@ -2677,7 +2757,7 @@ const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMa
         }
         return configs;
     }, [adapterConfig, options]);
-    return (jsxRuntime.jsx("div", { className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
+    return (jsxRuntime.jsx("div", { "aria-label": ariaLabel, className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
             const derivedConfig = derivedConfigs.get(option.theme);
             if (derivedConfig === undefined) {
                 return null;
@@ -2872,7 +2952,13 @@ const useMapAppearanceControls = ({ api, options: appearanceOptions, persistence
                 type: "custom",
                 id: "map-style-preview",
                 label: t("settings.mapStyle.title"),
-                render: () => (jsxRuntime.jsx(AppearancePreviewGrid, { adapterConfig: adapterConfig, currentMapType: localState.mapType, currentTheme: localState.theme, onChange: handleAppearanceChange, options: previewOptions })),
+                // Heads the grid in every mode. In a flattened responsive menu the trigger label is
+                // gone, so without this the grid renders anonymously under the previous control's
+                // items; in "full" mode it makes this menu consistent with Assets and Sites.
+                section: t("settings.mapStyle.title"),
+                render: () => (jsxRuntime.jsx(AppearancePreviewGrid, { adapterConfig: adapterConfig, 
+                    // `SectionHeader` is role="presentation", so the header above names nothing.
+                    ariaLabel: t("settings.mapStyle.title"), currentMapType: localState.mapType, currentTheme: localState.theme, onChange: handleAppearanceChange, options: previewOptions })),
             },
         ];
         const isSatelliteOrHybrid = localState.mapType === "satellite" || localState.mapType === "hybrid";

package/index.esm.js

@@ -58,22 +58,22 @@ const translations = {
     default: defaultTranslations,
     languages: {
         de: () => import('./translation.esm.js'),
-        da: () => import('./translation2.esm.js'),
-        cs: () => import('./translation3.esm.js'),
-        nl: () => import('./translation4.esm.js'),
-        fr: () => import('./translation5.esm.js'),
-        fi: () => import('./translation6.esm.js'),
-        hu: () => import('./translation7.esm.js'),
-        it: () => import('./translation8.esm.js'),
-        nb: () => import('./translation9.esm.js'),
-        pl: () => import('./translation10.esm.js'),
-        pt: () => import('./translation11.esm.js'),
-        ru: () => import('./translation12.esm.js'),
-        ro: () => import('./translation13.esm.js'),
-        es: () => import('./translation14.esm.js'),
-        sv: () => import('./translation15.esm.js'),
-        ja: () => import('./translation16.esm.js'),
-        th: () => import('./translation17.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
     },
 };
 /**
@@ -1578,14 +1578,43 @@ const usePreviewMap = (adapterConfig, options) => {
     return useMemo(() => ({ Map, ready }), [Map, ready]);
 };
 
+/** Shared separator between control/category blocks. */
+const SEPARATOR = { type: "separator" };
 // ============================================================================
 // Overflow Behavior Helper
 // ============================================================================
 /** Resolve a control's overflow behavior, defaulting to "menu". */
 const resolveOverflow = (control) => control.overflowBehavior ?? "menu";
-/** Filter out controls that should be hidden (not menued) when collapsing. */
+/** Filter out controls that opted out of menuing with `overflowBehavior: "hide"`. */
 const excludeHidden = (controls) => controls.filter(c => resolveOverflow(c) !== "hide");
 // ============================================================================
+// Section name as a Fallback Header
+// ============================================================================
+/**
+ * Fallback `section` across the block's leading run of items that declare none of their
+ * own -- from the first non-separator item up to the first separator or the first item
+ * with its own `section` (ADR 0027).
+ *
+ * The whole run gets it so the header and the items it visually claims land in one
+ * `groupItemsBySection` group. The run stops at a separator because a separator always
+ * starts a new group, so carrying the section past one would repeat the header.
+ */
+const applyFallbackSectionAsHeader = (items, section) => {
+    const runStart = items.findIndex(item => item.type !== "separator");
+    const firstItem = items[runStart];
+    if (firstItem === undefined || firstItem.type === "separator" || firstItem.section !== undefined)
+        return items;
+    const runEndOffset = items
+        .slice(runStart + 1)
+        .findIndex(item => item.type === "separator" || item.section !== undefined);
+    const runEnd = runEndOffset === -1 ? items.length : runStart + 1 + runEndOffset;
+    return items.map((item, index) => {
+        if (index < runStart || index >= runEnd || item.type === "separator")
+            return item;
+        return { ...item, section };
+    });
+};
+// ============================================================================
 // Control-to-MenuItem Conversion
 // ============================================================================
 /**
@@ -1595,10 +1624,10 @@ const excludeHidden = (controls) => controls.filter(c => resolveOverflow(c) !==
  * One special case:
  * - **Menu** → flattens its items into the parent (menus cannot nest)
  *
- * When `section` is provided, it is set on each output item (except separators
- * which don't support sections).
+ * Items keep whatever `section` their author declared. The category label is
+ * applied later, once per block, by {@link applyFallbackSectionAsHeader}.
  */
-const controlToMenuItems = (control, section) => {
+const controlToMenuItems = (control) => {
     switch (control.type) {
         case "button":
         case "toggle":
@@ -1609,14 +1638,10 @@ const controlToMenuItems = (control, section) => {
         case "search":
         case "custom":
         case "stepper":
-            return [section !== undefined ? { ...control, section } : control];
+            return [control];
         case "menu":
-            // Flatten the menu's items into the parent, applying section to each
-            return control.items.map(item => {
-                if (item.type === "separator")
-                    return item;
-                return section !== undefined ? { ...item, section } : item;
-            });
+            // Menus cannot nest -- flatten the menu's items into the parent
+            return control.items;
         default: {
             const exhaustiveCheck = control;
             throw new Error(`Unknown control type: ${exhaustiveCheck}`);
@@ -1624,6 +1649,60 @@ const controlToMenuItems = (control, section) => {
     }
 };
 // ============================================================================
+// Flattening a Set of Controls Into One Menu
+// ============================================================================
+/**
+ * Trim edge separators and collapse runs (so authored separators do not double up
+ * against delimiters from {@link flattenControlsToMenuItems}).
+ */
+const normalizeSeparators = (items) => {
+    const normalized = items.reduce((accumulated, item) => {
+        if (item.type !== "separator")
+            return [...accumulated, item];
+        if (accumulated.length === 0 || accumulated.at(-1)?.type === "separator")
+            return accumulated;
+        return [...accumulated, SEPARATOR];
+    }, []);
+    return normalized.at(-1)?.type === "separator" ? normalized.slice(0, -1) : normalized;
+};
+/**
+ * Whether a control type renders as one row inside a menu: two adjacent single-row
+ * controls skip the separator between them, anything else is delimited (ADR 0027).
+ *
+ * Total `Record` so a new `ControlConfig` type fails compile until classified.
+ */
+const RENDERS_AS_SINGLE_ROW = {
+    button: true,
+    checkbox: true,
+    stepper: true,
+    toggle: true,
+    custom: false,
+    menu: false,
+    radioGroup: false,
+    search: false,
+    select: false,
+    toggleGroup: false,
+};
+const isSingleRowControl = (control) => RENDERS_AS_SINGLE_ROW[control.type];
+/**
+ * Flatten controls into one menu's items, preserving declared order (ADR 0022).
+ *
+ * Separator between adjacent controls unless both render as a single row
+ * ({@link RENDERS_AS_SINGLE_ROW}). Empty/separator-only controls contribute no
+ * control block (ADR 0027).
+ */
+const flattenControlsToMenuItems = (controls) => {
+    const controlBlocks = controls
+        .map(control => ({ isSingleRow: isSingleRowControl(control), items: controlToMenuItems(control) }))
+        .filter(controlBlock => controlBlock.items.some(item => item.type !== "separator"));
+    const flattened = controlBlocks.flatMap((controlBlock, index) => {
+        const previousBlock = controlBlocks[index - 1];
+        const needsSeparator = previousBlock !== undefined && !(previousBlock.isSingleRow && controlBlock.isSingleRow);
+        return needsSeparator ? [SEPARATOR, ...controlBlock.items] : controlBlock.items;
+    });
+    return normalizeSeparators(flattened);
+};
+// ============================================================================
 // Category Collapsing (categorized mode)
 // ============================================================================
 /**
@@ -1639,7 +1718,7 @@ const collapseCategory = (controls, categoryKey, meta) => {
         return controls;
     // Exclude controls that prefer hiding over being menued
     const menuable = excludeHidden(controls);
-    const menuItems = menuable.flatMap(control => controlToMenuItems(control));
+    const menuItems = flattenControlsToMenuItems(menuable);
     // If nothing remains after filtering, return empty
     if (menuItems.length === 0)
         return [];
@@ -1656,21 +1735,17 @@ const collapseCategory = (controls, categoryKey, meta) => {
     return [menu];
 };
 /**
- * Collects all controls from all categories into a single menu with
- * named sections per category.
+ * Merge all categories into one menu. Non-empty category blocks are
+ * separator-delimited; labels via {@link applyFallbackSectionAsHeader}.
  *
  * Controls with `overflowBehavior: "hide"` are excluded and fully hidden.
  */
 const collapseAll = (categories, allControls) => {
-    const allItems = [];
-    for (const { label, controls } of categories) {
-        if (controls.length === 0)
-            continue;
+    const categoryBlocks = categories
         // Exclude controls that prefer hiding over being menued
-        const menuable = excludeHidden(controls);
-        const items = menuable.flatMap(control => controlToMenuItems(control, label));
-        allItems.push(...items);
-    }
+        .map(({ label, controls }) => applyFallbackSectionAsHeader(flattenControlsToMenuItems(excludeHidden(controls)), label))
+        .filter(items => items.length > 0);
+    const allItems = categoryBlocks.flatMap((items, index) => (index === 0 ? items : [SEPARATOR, ...items]));
     // Nothing to show
     if (allItems.length === 0) {
         return {
@@ -1705,7 +1780,9 @@ const collapseAll = (categories, allControls) => {
  * - `"full"` -- pass through unchanged
  * - `"categorized"` -- group controls within each category into a per-category
  *   menu (only when >1 control in that category)
- * - `"collapsed"` -- merge all controls into a single menu with named sections
+ * - `"collapsed"` -- merge all controls into a single menu, separator-delimited per
+ *   category. Items keep their own `section`; the category name only heads a block whose
+ *   leading items declare none (ADR 0027)
  *
  * This operates at the config level, before controls enter the middleware
  * rendering pipeline. Existing renderers handle the resulting menus with no
@@ -2290,6 +2367,9 @@ const renderMenuItem = (item, index, availableSpace, customPortalId, isFullScree
 const groupItemsBySection = (items) => {
     const groups = [];
     for (const item of items) {
+        // Separators get their own group so they delimit rather than join one: a separator declares no
+        // `section`, so without this branch its `undefined` matches the preceding sectionless group and
+        // `[a, separator, b]` would collapse from three groups into one holding all three.
         if (item.type === "separator") {
             groups.push({ section: undefined, items: [item] });
             continue;
@@ -2439,7 +2519,7 @@ const Stepper = ({ config, overlaySide = undefined, resolved }) => {
         : decrementHover.hovering
             ? `${label}, ${decreaseLabel}`
             : label;
-    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" })] }) }));
+    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, { ariaLabel: increaseLabel, className: "rounded-b-none", icon: jsx(Icon, { name: "Plus", size: "small" }), onClick: onClickIncrement, onMouseEnter: incrementHover.onMouseEnter, onMouseLeave: incrementHover.onMouseLeave, size: size, variant: "secondary" }), jsx(IconButton, { ariaLabel: 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, variant: "secondary" })] }) }));
 };
 
 function assertStandaloneToggleGroupIcons(config) {
@@ -2666,7 +2746,7 @@ const AppearancePreview = ({ adapterConfig, mapType, label, selected, onSelect,
  *
  * @internal
  */
-const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMapType, onChange, }) => {
+const AppearancePreviewGrid = ({ adapterConfig, ariaLabel, options, currentTheme, currentMapType, onChange, }) => {
     const derivedConfigs = useMemo(() => {
         const configs = new Map();
         for (const option of options) {
@@ -2676,7 +2756,7 @@ const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMa
         }
         return configs;
     }, [adapterConfig, options]);
-    return (jsx("div", { className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
+    return (jsx("div", { "aria-label": ariaLabel, className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
             const derivedConfig = derivedConfigs.get(option.theme);
             if (derivedConfig === undefined) {
                 return null;
@@ -2871,7 +2951,13 @@ const useMapAppearanceControls = ({ api, options: appearanceOptions, persistence
                 type: "custom",
                 id: "map-style-preview",
                 label: t("settings.mapStyle.title"),
-                render: () => (jsx(AppearancePreviewGrid, { adapterConfig: adapterConfig, currentMapType: localState.mapType, currentTheme: localState.theme, onChange: handleAppearanceChange, options: previewOptions })),
+                // Heads the grid in every mode. In a flattened responsive menu the trigger label is
+                // gone, so without this the grid renders anonymously under the previous control's
+                // items; in "full" mode it makes this menu consistent with Assets and Sites.
+                section: t("settings.mapStyle.title"),
+                render: () => (jsx(AppearancePreviewGrid, { adapterConfig: adapterConfig, 
+                    // `SectionHeader` is role="presentation", so the header above names nothing.
+                    ariaLabel: t("settings.mapStyle.title"), currentMapType: localState.mapType, currentTheme: localState.theme, onChange: handleAppearanceChange, options: previewOptions })),
             },
         ];
         const isSatelliteOrHybrid = localState.mapType === "satellite" || localState.mapType === "hybrid";

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/map/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.33-alpha-288640a1f26.0",
+  "version": "0.2.36",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.2.26-alpha-288640a1f26.0",
-    "@trackunit/css-class-variance-utilities": "1.13.83-alpha-288640a1f26.0",
-    "@trackunit/react-form-components": "2.2.27-alpha-288640a1f26.0",
-    "@trackunit/react-core-hooks": "1.18.24-alpha-288640a1f26.0",
-    "@trackunit/geo-json-utils": "1.14.86-alpha-288640a1f26.0",
-    "@trackunit/i18n-library-translation": "2.1.24-alpha-288640a1f26.0",
+    "@trackunit/react-components": "2.2.26",
+    "@trackunit/css-class-variance-utilities": "1.13.82",
+    "@trackunit/react-form-components": "2.2.28",
+    "@trackunit/react-core-hooks": "1.18.23",
+    "@trackunit/geo-json-utils": "1.14.85",
+    "@trackunit/i18n-library-translation": "2.1.23",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.67-alpha-288640a1f26.0",
-    "@trackunit/react-map-color-utils": "0.0.52-alpha-288640a1f26.0",
-    "@trackunit/ui-design-tokens": "1.13.82-alpha-288640a1f26.0",
+    "@trackunit/react-map-adapter-shared": "0.0.66",
+    "@trackunit/react-map-color-utils": "0.0.51",
+    "@trackunit/ui-design-tokens": "1.13.81",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/appearance/AppearancePreviewGrid.d.ts

@@ -2,6 +2,8 @@ import type { AdapterConfig } from "@trackunit/react-map-adapter-shared";
 import type { MapTheme, MapType } from "../core/types";
 import type { AppearanceOption } from "./appearanceTypes";
 type AppearancePreviewGridProps = Readonly<{
+    /** Accessible name for the radiogroup (the visual `SectionHeader` is `role="presentation"`) */
+    ariaLabel: string;
     /** The adapter config from the main map (used to derive preview configs) */
     adapterConfig: AdapterConfig;
     /** Appearance options to display */
@@ -25,5 +27,5 @@ type AppearancePreviewGridProps = Readonly<{
  *
  * @internal
  */
-export declare const AppearancePreviewGrid: ({ adapterConfig, options, currentTheme, currentMapType, onChange, }: AppearancePreviewGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppearancePreviewGrid: ({ adapterConfig, ariaLabel, options, currentTheme, currentMapType, onChange, }: AppearancePreviewGridProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/collapseControls.d.ts

@@ -16,10 +16,10 @@ export type CategoryMetadata = Readonly<Record<CategoryKey, CategoryMeta> & {
  * One special case:
  * - **Menu** → flattens its items into the parent (menus cannot nest)
  *
- * When `section` is provided, it is set on each output item (except separators
- * which don't support sections).
+ * Items keep whatever `section` their author declared. The category label is
+ * applied later, once per block, by {@link applyFallbackSectionAsHeader}.
  */
-export declare const controlToMenuItems: (control: ControlConfig, section?: string) => ReadonlyArray<MenuItemConfig>;
+export declare const controlToMenuItems: (control: ControlConfig) => ReadonlyArray<MenuItemConfig>;
 /**
  * Pure config transform that restructures `ControlsConfig` based on how much
  * space is available.
@@ -27,7 +27,9 @@ export declare const controlToMenuItems: (control: ControlConfig, section?: stri
  * - `"full"` -- pass through unchanged
  * - `"categorized"` -- group controls within each category into a per-category
  *   menu (only when >1 control in that category)
- * - `"collapsed"` -- merge all controls into a single menu with named sections
+ * - `"collapsed"` -- merge all controls into a single menu, separator-delimited per
+ *   category. Items keep their own `section`; the category name only heads a block whose
+ *   leading items declare none (ADR 0027)
  *
  * This operates at the config level, before controls enter the middleware
  * rendering pipeline. Existing renderers handle the resulting menus with no

package/src/controls/types.d.ts

@@ -284,6 +284,11 @@ export type CustomControlConfig = BaseControlConfig<"custom"> & Readonly<{
      * Use this to transform or extend the resolved props based on the environment.
      * For example, override size decisions or add custom visibility logic.
      *
+     * **Caveat —** returning `visible: false` hides the control at render time only.
+     * Responsive flattening, its separators and its section headers are computed
+     * beforehand and do not account for it, so a control hidden this way inside an
+     * overflow menu can leave an orphaned divider or section header behind.
+     *
      * @example
      * ```ts
      * resolve: (resolved, renderContext) => ({
@@ -356,8 +361,10 @@ export interface BuiltInControlsConfig extends ControlsConfig {
  * - `"full"` -- all standalone controls shown as-is (wide containers)
  * - `"categorized"` -- controls within each category grouped into a per-category
  *   menu when >1 control exists in that category (medium containers)
- * - `"collapsed"` -- all controls collapsed into a single menu button with
- *   named sections per category (narrow containers)
+ * - `"collapsed"` -- all controls collapsed into a single menu button, with each
+ *   category's block separated from the next (narrow containers). Items keep whatever
+ *   `section` they declare; the category name is only used as a fallback header for a
+ *   block whose leading items declare none.
  */
 export type ResponsiveMode = "full" | "categorized" | "collapsed";
 /** The four semantic control areas used for categorization and section headers */