@tpzdsp/next-toolkit 2.0.0 → 2.1.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A reusable React component library for Next.js applications",
+  "packageManager": "pnpm@11.5.3",
   "engines": {
-    "node": "^24.12.0",
-    "pnpm": "^10.0.0"
+    "node": "24.12.0",
+    "pnpm": "11.5.3"
   },
   "type": "module",
   "private": false,

package/src/assets/styles/ol.css

@@ -33,8 +33,8 @@
 .ol-btn:focus-visible {
   width: 40px !important;
   height: 40px !important;
-  border: none !important;
   outline: none !important;
+  border: 2px solid #0b0c0c !important;
 }
 
 .ol-btn {
@@ -47,7 +47,8 @@
   cursor: pointer;
   transition:
     box-shadow 0.2s,
-    background 0.2s;
+    background 0.2s,
+    border-color 0.2s;
   margin: 0;
   padding: 0;
   display: flex;
@@ -71,11 +72,16 @@
 
 .ol-btn:focus,
 .ol-btn:focus-visible {
-  outline: 3px solid var(--focus-outline-color) !important;
+  border-color: var(--focus-outline-color) !important;
   background: var(--focus-color) !important;
   z-index: 2;
 }
 
+.ol-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* Universal OpenLayers control focus style for non-button elements */
 #map:focus,
 .ol-viewport:focus,
@@ -106,8 +112,8 @@
 .ol-zoom button:focus-visible {
   width: 40px !important;
   height: 40px !important;
-  border: none !important;
   outline: none !important;
+  border: 2px solid #0b0c0c !important;
 }
 
 .ol-zoom button {
@@ -136,7 +142,7 @@
 
 .ol-zoom button:focus,
 .ol-zoom button:focus-visible {
-  outline: 3px solid var(--focus-outline-color) !important;
+  border-color: var(--focus-outline-color) !important;
   background: var(--focus-color) !important;
   z-index: 2;
 }

package/src/map/LegendPanel.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import { cn } from '../utils';
+
+type LegendPanelProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  buttonRect: DOMRect | null;
+  children?: ReactNode;
+};
+
+export const LegendPanel = ({ isOpen, onClose, buttonRect, children }: LegendPanelProps) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isMounted || !isOpen) {
+    return <></>;
+  }
+
+  const top = buttonRect ? buttonRect.top : 200;
+  const right = buttonRect ? window.innerWidth - buttonRect.left + 8 : 96;
+  const maxHeight = buttonRect
+    ? `${window.innerHeight - buttonRect.top - 24}px`
+    : 'calc(100vh - 224px)';
+
+  return createPortal(
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Map legend"
+      style={{ top, right, maxHeight }}
+      className={cn(
+        'fixed bg-white rounded-lg shadow-lg border border-gray-200',
+        'flex flex-col',
+        'p-4 gap-3',
+        'w-[220px]',
+        'z-[9999]',
+      )}
+    >
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h2 className="text-sm font-semibold text-gray-800">Legend</h2>
+
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close legend"
+          className="w-8 h-8 flex items-center justify-center rounded text-gray-600 hover:bg-focus
+            focus:outline focus:outline-2 focus:outline-focus focus:bg-focus transition-colors"
+        >
+          <span className="text-xl leading-none" aria-hidden="true">
+            &times;
+          </span>
+        </button>
+      </div>
+
+      <div className="overflow-y-auto">{children}</div>
+    </div>,
+    document.body,
+  );
+};

package/src/map/MapComponent.tsx

@@ -3,12 +3,10 @@
 import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
 
 import { Feature, Map, Overlay, View } from 'ol';
-import { Attribution, ScaleLine, Zoom } from 'ol/control';
+import { Attribution, ScaleLine } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 
 import { initializeBasemapLayers } from './basemaps';
-import { FullScreenControl } from './FullScreenControl';
-import { LayerSwitcherControl } from './LayerSwitcherControl';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
 import { getPopupPositionClass, LAYER_NAMES } from './utils';
@@ -81,15 +79,9 @@ const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProp
       return;
     }
 
-    // Create controls individually
-    const mapZoom = new Zoom();
     const scaleLine = new ScaleLine({ units: 'metric' });
     const attribution = new Attribution();
-    const layerSwitcher = new LayerSwitcherControl(layers);
-    const fullScreenControl = new FullScreenControl();
-
-    // Add controls in the desired order
-    const controls = [mapZoom, layerSwitcher, fullScreenControl, scaleLine, attribution];
+    const controls = [scaleLine, attribution];
 
     const newMap = new Map({
       target,

package/src/map/MapControlsOverlay.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useCallback, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react';
+
+import BaseLayer from 'ol/layer/Base';
+import { LuLayers, LuList, LuMaximize2, LuMinus, LuMinimize2, LuPlus } from 'react-icons/lu';
+
+import { LayerSwitcherPanel } from './LayerSwitcherPanel';
+import { LegendPanel } from './LegendPanel';
+import { useMap } from './MapContext';
+
+type MapControlsOverlayProps = {
+  mapContainerRef: RefObject<HTMLDivElement | null>;
+  isLegendVisible?: boolean;
+  isLegendEnabled?: boolean;
+  legendContent?: ReactNode;
+};
+
+type ControlButtonProps = {
+  ariaLabel: string;
+  title: string;
+  icon: ReactNode;
+  onClick: () => void;
+  isPressed?: boolean;
+  isDisabled?: boolean;
+  hasPopup?: boolean;
+  isExpanded?: boolean;
+  buttonRef?: RefObject<HTMLButtonElement | null>;
+};
+
+const ControlButton = ({
+  ariaLabel,
+  title,
+  icon,
+  onClick,
+  isPressed,
+  isDisabled = false,
+  hasPopup,
+  isExpanded,
+  buttonRef,
+}: ControlButtonProps) => (
+  <button
+    ref={buttonRef}
+    type="button"
+    className="ol-btn"
+    aria-label={ariaLabel}
+    title={title}
+    onClick={onClick}
+    disabled={isDisabled}
+    aria-pressed={isPressed}
+    aria-haspopup={hasPopup ? 'dialog' : undefined}
+    aria-expanded={isExpanded}
+  >
+    <span aria-hidden="true">{icon}</span>
+  </button>
+);
+
+export const MapControlsOverlay = ({
+  mapContainerRef,
+  isLegendVisible = false,
+  isLegendEnabled = false,
+  legendContent,
+}: MapControlsOverlayProps) => {
+  const { map, getLayers } = useMap();
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isLayerSwitcherOpen, setIsLayerSwitcherOpen] = useState(false);
+  const [layerSwitcherButtonRect, setLayerSwitcherButtonRect] = useState<DOMRect | null>(null);
+  const layerSwitcherButtonRef = useRef<HTMLButtonElement>(null);
+  const [isLegendOpen, setIsLegendOpen] = useState(false);
+  const [legendButtonRect, setLegendButtonRect] = useState<DOMRect | null>(null);
+  const legendButtonRef = useRef<HTMLButtonElement>(null);
+
+  const basemapLayers = useMemo(
+    () => (getLayers()?.filter((l: BaseLayer) => l.get('basemap') === true) ?? []) as BaseLayer[],
+    [getLayers],
+  );
+
+  const activeLayerName =
+    (basemapLayers.find((l: BaseLayer) => l.getVisible())?.get('name') as string | undefined) ??
+    null;
+
+  const handleFullScreen = useCallback(() => {
+    const container = mapContainerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    const entering = !isFullScreen;
+
+    setIsFullScreen(entering);
+    container.classList.toggle('map-fullscreen', entering);
+
+    if (map) {
+      setTimeout(() => map.updateSize(), 300);
+    }
+  }, [isFullScreen, map, mapContainerRef]);
+
+  const handleLayerSwitcherToggle = useCallback(() => {
+    const rect = layerSwitcherButtonRef.current?.getBoundingClientRect() ?? null;
+
+    setLayerSwitcherButtonRect(rect);
+    setIsLayerSwitcherOpen((prev) => !prev);
+  }, []);
+
+  const handleLayerSwitcherClose = useCallback(() => {
+    setIsLayerSwitcherOpen(false);
+    layerSwitcherButtonRef.current?.focus();
+  }, []);
+
+  const handleLegendToggle = useCallback(() => {
+    const rect = legendButtonRef.current?.getBoundingClientRect() ?? null;
+
+    setLegendButtonRect(rect);
+    setIsLegendOpen((prev) => !prev);
+  }, []);
+
+  const handleLegendClose = useCallback(() => {
+    setIsLegendOpen(false);
+    legendButtonRef.current?.focus();
+  }, []);
+
+  const handleSelectLayer = useCallback(
+    (layerName: string) => {
+      const current = basemapLayers.find((l: BaseLayer) => l.getVisible());
+      const next = basemapLayers.find((l: BaseLayer) => l.get('name') === layerName);
+
+      current?.setVisible(false);
+      next?.setVisible(true);
+    },
+    [basemapLayers],
+  );
+
+  const handleZoomIn = useCallback(() => {
+    if (!map) {
+      return;
+    }
+
+    const view = map.getView();
+    const zoom = view.getZoom();
+
+    if (zoom !== undefined) {
+      view.animate({ zoom: zoom + 1, duration: 200 });
+    }
+  }, [map]);
+
+  const handleZoomOut = useCallback(() => {
+    if (!map) {
+      return;
+    }
+
+    const view = map.getView();
+    const zoom = view.getZoom();
+
+    if (zoom !== undefined) {
+      view.animate({ zoom: zoom - 1, duration: 200 });
+    }
+  }, [map]);
+
+  const fullScreenLabel = isFullScreen ? 'Exit full screen' : 'Toggle full screen';
+  const legendLabel = isLegendOpen ? 'Hide legend' : 'Show legend';
+
+  return (
+    <>
+      <div className="flex flex-col" role="group" aria-label="Map controls">
+        <ControlButton
+          ariaLabel={fullScreenLabel}
+          title={fullScreenLabel}
+          icon={isFullScreen ? <LuMinimize2 size={20} /> : <LuMaximize2 size={20} />}
+          onClick={handleFullScreen}
+        />
+
+        <ControlButton
+          buttonRef={layerSwitcherButtonRef}
+          ariaLabel="Toggle basemap selector"
+          title="Basemap selector"
+          icon={<LuLayers size={20} />}
+          onClick={handleLayerSwitcherToggle}
+          hasPopup
+          isExpanded={isLayerSwitcherOpen}
+        />
+
+        <ControlButton
+          ariaLabel="Zoom in"
+          title="Zoom in"
+          icon={<LuPlus size={20} />}
+          onClick={handleZoomIn}
+        />
+
+        <ControlButton
+          ariaLabel="Zoom out"
+          title="Zoom out"
+          icon={<LuMinus size={20} />}
+          onClick={handleZoomOut}
+        />
+
+        {isLegendVisible ? (
+          <ControlButton
+            buttonRef={legendButtonRef}
+            ariaLabel={legendLabel}
+            title={legendLabel}
+            icon={<LuList size={20} />}
+            onClick={handleLegendToggle}
+            hasPopup
+            isExpanded={isLegendOpen}
+            isDisabled={!isLegendEnabled}
+          />
+        ) : null}
+      </div>
+
+      <LayerSwitcherPanel
+        isOpen={isLayerSwitcherOpen}
+        onClose={handleLayerSwitcherClose}
+        layers={basemapLayers}
+        activeLayerName={activeLayerName}
+        onSelectLayer={handleSelectLayer}
+        buttonRect={layerSwitcherButtonRect}
+      />
+
+      {isLegendVisible ? (
+        <LegendPanel
+          isOpen={isLegendOpen}
+          onClose={handleLegendClose}
+          buttonRect={legendButtonRect}
+        >
+          {legendContent}
+        </LegendPanel>
+      ) : null}
+    </>
+  );
+};

package/src/map/geocoder/Geocoder.tsx

@@ -3,73 +3,13 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 import type Map from 'ol/Map';
+import { ImSpinner2 } from 'react-icons/im';
+import { IoClose, IoSearch } from 'react-icons/io5';
 
 import { groupResults } from './groupResults';
 import type { GeocoderResult } from './types';
 import { useDebounce } from '../../hooks/useDebounce';
 
-// SVG Icons matching Mapbox GL Geocoder style
-const SearchIcon = () => (
-  <svg
-    className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
-    width="20"
-    height="20"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M7.5 13.5C10.8137 13.5 13.5 10.8137 13.5 7.5C13.5 4.18629 10.8137 1.5 7.5 1.5C4.18629 1.5 1.5 4.18629 1.5 7.5C1.5 10.8137 4.18629 13.5 7.5 13.5Z"
-      stroke="#757575"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-
-    <path
-      d="M16.5 16.5L11.625 11.625"
-      stroke="#757575"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ClearIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M15 5L5 15M5 5L15 15"
-      stroke="#757575"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const LoadingIcon = () => (
-  <svg
-    className="animate-spin"
-    width="26"
-    height="26"
-    viewBox="0 0 26 26"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="13"
-      cy="13"
-      r="10"
-      stroke="#757575"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeDasharray="60"
-      strokeDashoffset="40"
-    />
-  </svg>
-);
-
 // Typeahead defaults
 const DEFAULT_TYPEAHEAD_DELAY_MS = 500;
 
@@ -217,19 +157,11 @@ export const Geocoder = ({
       if (shouldZoomOut) {
         // Step 1: Zoom out, then combined pan + zoom in (like ol-geocoder)
         view.animate({ zoom: flyZoom, duration: zoomOutDuration }, () => {
-          view.animate({
-            center: result.center,
-            zoom: finalZoom,
-            duration: flyToDuration,
-          });
+          view.animate({ center: result.center, zoom: finalZoom, duration: flyToDuration });
         });
       } else {
         // Combined pan + zoom in one smooth animation
-        view.animate({
-          center: result.center,
-          zoom: finalZoom,
-          duration: flyToDuration,
-        });
+        view.animate({ center: result.center, zoom: finalZoom, duration: flyToDuration });
       }
     }
 
@@ -278,12 +210,14 @@ export const Geocoder = ({
         Search for a place
       </label>
 
-      {/* Mapbox-style geocoder container */}
       <div
-        className="relative bg-white rounded shadow-lg transition-all duration-200
-          focus-within:ring-2 focus-within:ring-focus"
+        className="relative bg-white rounded shadow-lg border-2 border-[#0b0c0c] transition-all
+          duration-200 focus-within:ring-2 focus-within:ring-focus"
       >
-        <SearchIcon />
+        <IoSearch
+          size={20}
+          className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
+        />
 
         <input
           ref={inputRef}
@@ -336,13 +270,12 @@ export const Geocoder = ({
             placeholder:text-gray-500 focus:outline-none focus:ring-0"
         />
 
-        {/* Clear or Loading button */}
         <div className="absolute right-2 top-1/2 -translate-y-1/2">
           {(() => {
             if (isSearching) {
               return (
                 <div className="p-1">
-                  <LoadingIcon />
+                  <ImSpinner2 size={22} className="animate-spin text-gray-500" />
                 </div>
               );
             }
@@ -355,7 +288,7 @@ export const Geocoder = ({
                   aria-label="Clear search"
                   className="p-1 hover:bg-gray-100 rounded transition-colors"
                 >
-                  <ClearIcon />
+                  <IoClose size={20} className="text-gray-500" />
                 </button>
               );
             }
@@ -369,7 +302,7 @@ export const Geocoder = ({
       {open ? (
         <div className="absolute z-1000 mt-1.5 w-full bg-white rounded shadow-lg overflow-hidden">
           {results.length > 0 ? (
-            <div id={listboxId} role="listbox" className="max-h-60 overflow-auto">
+            <div id={listboxId} role="listbox" tabIndex={-1} className="max-h-60 overflow-auto">
               {Object.entries(grouped).map(([group, items]) => (
                 <div key={group} role="presentation">
                   <div
@@ -382,21 +315,22 @@ export const Geocoder = ({
                   <div role="group">
                     {items.map((item) => {
                       flatIndex += 1;
-                      const isActive = flatIndex === activeIndex;
+                      const itemIndex = flatIndex;
+                      const isActive = itemIndex === activeIndex;
                       const isSelected = item.id === selectedId;
 
                       return (
                         <div
-                          id={`${listboxId}-option-${flatIndex}`}
+                          id={`${listboxId}-option-${itemIndex}`}
                           key={item.id}
                           role="option"
                           aria-selected={isSelected}
                           tabIndex={-1}
-                          className={`cursor-pointer px-3 py-2 text-sm text-gray-800
+                          className={`scroll-mt-8 cursor-pointer px-3 py-2 text-sm text-gray-800
                             transition-colors ${isSelected ? 'bg-blue-50 font-semibold' : ''}
                             ${isActive && !isSelected ? 'bg-gray-100' : ''}
                             ${!isSelected && !isActive ? 'hover:bg-gray-50' : ''}`}
-                          onMouseEnter={() => setActiveIndex(flatIndex)}
+                          onMouseEnter={() => setActiveIndex(itemIndex)}
                           onMouseDown={() => selectResult(item)}
                         >
                           <div className="truncate">{item.label}</div>

package/src/map/index.ts

@@ -1,10 +1,9 @@
 export * from './basemaps';
 export * from './geocoder/index';
 export * from './geometries';
-export * from './createControlButton';
-export * from './LayerSwitcherControl';
 export * from './LayerSwitcherPanel';
-export * from './FullScreenControl';
+export * from './LegendPanel';
+export * from './MapControlsOverlay';
 export * from './utils';
 export * from './MapComponent';
 export * from './MapContext';

package/src/map/useKeyboardDrawing.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 
 import { Map as OlMap } from 'ol';

package/src/map/useVirtualCursor.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef } from 'react';
 
 import { Map as OlMap } from 'ol';

package/src/map/FullScreenControl.ts

@@ -1,126 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { Map } from 'ol';
-import { Control } from 'ol/control';
-import type { Options as ControlOptions } from 'ol/control/Control';
-
-import { CONTROL_ICONS, createControlButton } from './createControlButton';
-
-const FULL_SCREEN_CLASS = 'map-fullscreen';
-const ARIA_LABEL_TOGGLE = 'Toggle full screen';
-const ARIA_LABEL_EXIT = 'Exit full screen';
-
-export class FullScreenControl extends Control {
-  private isFullScreen = false;
-  private readonly button!: HTMLButtonElement;
-  liveRegion!: HTMLElement;
-  private mapContainer: HTMLElement | null = null;
-
-  constructor(options?: ControlOptions) {
-    const button = createControlButton({
-      ariaLabel: ARIA_LABEL_TOGGLE,
-      title: ARIA_LABEL_TOGGLE,
-      iconSvg: CONTROL_ICONS.EXPAND,
-      className: 'ol-fullscreen-toggle',
-    });
-
-    const element = document.createElement('div');
-
-    element.className = 'ol-fullscreen ol-unselectable ol-control';
-    element.appendChild(button);
-
-    // Create a live region for screen reader announcements
-    const liveRegion = document.createElement('div');
-
-    liveRegion.setAttribute('aria-live', 'polite');
-    liveRegion.setAttribute('role', 'status');
-    liveRegion.className = 'ol-fullscreen-live-region';
-    liveRegion.style.position = 'absolute';
-    liveRegion.style.width = '1px';
-    liveRegion.style.height = '1px';
-    liveRegion.style.margin = '-1px';
-    liveRegion.style.border = '0';
-    liveRegion.style.padding = '0';
-    liveRegion.style.overflow = 'hidden';
-    liveRegion.style.clipPath = 'inset(50%)';
-    element.appendChild(liveRegion);
-
-    super({
-      element,
-      target: options?.target,
-    });
-
-    this.button = button;
-    this.liveRegion = liveRegion;
-
-    button.addEventListener('click', this.toggleFullScreen, false);
-  }
-
-  setMap(map: Map | null) {
-    super.setMap(map);
-
-    if (map) {
-      // Find the map container (the target element)
-      this.mapContainer = map.getTargetElement();
-    }
-  }
-
-  private readonly updateButtonIcon = (isFullScreen: boolean): void => {
-    // Update the SVG icon content
-    const svg = this.button.querySelector('svg');
-
-    if (svg) {
-      svg.innerHTML = isFullScreen ? CONTROL_ICONS.COLLAPSE : CONTROL_ICONS.EXPAND;
-    }
-  };
-
-  toggleFullScreen = (): void => {
-    if (!this.mapContainer) {
-      console.warn('Map container not found');
-
-      return;
-    }
-
-    this.isFullScreen = !this.isFullScreen;
-
-    if (this.isFullScreen) {
-      // Enter full screen mode
-      this.mapContainer.classList.add(FULL_SCREEN_CLASS);
-      this.updateButtonIcon(true);
-      this.button.setAttribute('aria-label', ARIA_LABEL_EXIT);
-      this.button.setAttribute('title', ARIA_LABEL_EXIT);
-      this.liveRegion.textContent = 'Full screen mode enabled';
-    } else {
-      // Exit full screen mode
-      this.mapContainer.classList.remove(FULL_SCREEN_CLASS);
-      this.updateButtonIcon(false);
-      this.button.setAttribute('aria-label', ARIA_LABEL_TOGGLE);
-      this.button.setAttribute('title', ARIA_LABEL_TOGGLE);
-      this.liveRegion.textContent = 'Full screen mode disabled';
-    }
-
-    // Force map to update its size after the transition
-    const map = this.getMap();
-
-    if (map) {
-      // Wait for CSS transition to complete before updating size
-      setTimeout(() => {
-        map.updateSize();
-      }, 300);
-    }
-  };
-
-  // Public method to exit full screen programmatically
-  exitFullScreen(): void {
-    if (this.isFullScreen) {
-      this.toggleFullScreen();
-    }
-  }
-
-  dispose(): void {
-    if (this.button) {
-      this.button.removeEventListener('click', this.toggleFullScreen);
-    }
-
-    super.dispose?.();
-  }
-}

package/src/map/LayerSwitcherControl.ts

@@ -1,173 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { createElement } from 'react';
-
-import { Map } from 'ol';
-import { Control } from 'ol/control';
-import type { Options as ControlOptions } from 'ol/control/Control';
-import BaseLayer from 'ol/layer/Base';
-import { createRoot } from 'react-dom/client';
-import type { Root } from 'react-dom/client';
-
-import { createControlButton } from './createControlButton';
-import { LayerSwitcherPanel } from './LayerSwitcherPanel';
-
-const MAP_LOGO =
-  '<path d="M20.5 3l-5.7 2.1-6-2L3.5 5c-.3.1-.5.5-.5.8v15.2c0 .3.2.6.5.7l5.7-2.1 6 2 5.3-1.9c.3-.1.5-.4.5-.7V3.8c0-.3-.2-.6-.5-.8zM10 5.2l4 1.3v12.3l-4-1.3V5.2zm-6 1.1l4-1.4v12.3l-4 1.4V6.3zm16 12.4l-4 1.4V7.8l4-1.4v12.3z"/>';
-
-export class LayerSwitcherControl extends Control {
-  map!: Map;
-  liveRegion!: HTMLElement;
-  isOpen = false;
-  private readonly layers: BaseLayer[];
-  private reactRoot: Root | null = null;
-  private reactContainer: HTMLDivElement | null = null;
-  private readonly button!: HTMLButtonElement;
-  private isClosingFromPanel = false;
-
-  constructor(layers: BaseLayer[], options?: ControlOptions) {
-    const button = createControlButton({
-      ariaLabel: 'Toggle basemap selector',
-      title: 'Basemap selector',
-      iconSvg: MAP_LOGO,
-      hasPopup: true,
-    });
-
-    const element = document.createElement('div');
-
-    element.className = 'ol-layer-switcher ol-unselectable ol-control';
-    element.appendChild(button);
-
-    // Create a live region for screen reader announcements
-    const liveRegion = document.createElement('div');
-
-    liveRegion.setAttribute('aria-live', 'polite');
-    liveRegion.setAttribute('role', 'status');
-    liveRegion.className = 'ol-layer-switcher-live-region';
-    liveRegion.style.position = 'absolute';
-    liveRegion.style.width = '1px';
-    liveRegion.style.height = '1px';
-    liveRegion.style.margin = '-1px';
-    liveRegion.style.border = '0';
-    liveRegion.style.padding = '0';
-    liveRegion.style.overflow = 'hidden';
-    liveRegion.style.clipPath = 'inset(50%)';
-    element.appendChild(liveRegion);
-
-    super({
-      element,
-      target: options?.target,
-    });
-
-    this.layers = layers;
-    this.button = button;
-    this.liveRegion = liveRegion;
-
-    // Create React container
-    this.reactContainer = document.createElement('div');
-    this.reactRoot = createRoot(this.reactContainer);
-
-    button.addEventListener('click', this.toggleLayerSwitcher, false);
-  }
-
-  private getCurrentBasemap(): BaseLayer | undefined {
-    return this.layers.find((layer: BaseLayer) => layer.getVisible() === true);
-  }
-
-  private getBasemapByName(layerName: string): BaseLayer | undefined {
-    return this.layers.find((layer: BaseLayer) => layer.get('name') === layerName);
-  }
-
-  setMap(map: Map | null) {
-    super.setMap(map);
-
-    if (map) {
-      this.map = map;
-    }
-  }
-
-  toggleLayerSwitcher = (): void => {
-    // Prevent double-toggle when panel closes via focus trap
-    if (this.isClosingFromPanel) {
-      this.isClosingFromPanel = false;
-
-      return;
-    }
-
-    this.isOpen = !this.isOpen;
-    this.button.setAttribute('aria-expanded', this.isOpen.toString());
-
-    if (this.isOpen) {
-      this.liveRegion.textContent = 'Basemap switcher opened';
-      this.renderPanel();
-    } else {
-      this.liveRegion.textContent = 'Basemap switcher closed';
-      this.closePanel();
-    }
-  };
-
-  private readonly handlePanelClose = (): void => {
-    if (this.isOpen) {
-      this.isClosingFromPanel = true;
-      this.isOpen = false;
-      this.button.setAttribute('aria-expanded', 'false');
-      this.liveRegion.textContent = 'Basemap switcher closed';
-      this.closePanel();
-    }
-  };
-
-  private readonly renderPanel = (): void => {
-    if (!this.reactRoot || !this.reactContainer) {
-      return;
-    }
-
-    const buttonRect = this.button.getBoundingClientRect();
-    const activeLayer = this.getCurrentBasemap();
-    const activeLayerName = activeLayer ? (activeLayer.get('name') as string) : '';
-
-    this.reactRoot.render(
-      createElement(LayerSwitcherPanel, {
-        isOpen: this.isOpen,
-        onClose: this.handlePanelClose,
-        layers: this.layers,
-        activeLayerName,
-        onSelectLayer: this.selectBasemap,
-        buttonRect,
-      }),
-    );
-  };
-
-  private readonly closePanel = (): void => {
-    if (!this.reactRoot) {
-      return;
-    }
-
-    this.reactRoot.render(null);
-  };
-
-  selectBasemap = (layerName: string): void => {
-    const currentBasemap = this.getCurrentBasemap();
-    const newBasemap = this.getBasemapByName(layerName);
-
-    currentBasemap?.setVisible(false);
-    newBasemap?.setVisible(true);
-
-    this.liveRegion.textContent = `${layerName} basemap selected`;
-
-    // Re-render to update active state
-    if (this.isOpen) {
-      this.renderPanel();
-    }
-  };
-
-  dispose(): void {
-    // Clean up React root
-    if (this.reactRoot) {
-      this.reactRoot.unmount();
-      this.reactRoot = null;
-    }
-
-    this.reactContainer = null;
-
-    super.dispose?.();
-  }
-}

package/src/map/createControlButton.ts

@@ -1,72 +0,0 @@
-/**
- * Utility function to create a standardized OpenLayers control button
- * with consistent styling and accessibility attributes.
- *
- * @example
- * const button = createControlButton({
- *   ariaLabel: 'Toggle feature',
- *   title: 'Feature control',
- *   iconSvg: '<path d="M..." />',
- * });
- */
-
-// Common SVG icons for map controls
-export const CONTROL_ICONS = {
-  PLUS: '<path d="M12 5v14m-7-7h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  MINUS: '<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  MAP_LAYERS:
-    '<path d="M20.5 3l-5.7 2.1-6-2L3.5 5c-.3.1-.5.5-.5.8v15.2c0 .3.2.6.5.7l5.7-2.1 6 2 5.3-1.9c.3-.1.5-.4.5-.7V3.8c0-.3-.2-.6-.5-.8zM10 5.2l4 1.3v12.3l-4-1.3V5.2zm-6 1.1l4-1.4v12.3l-4 1.4V6.3zm16 12.4l-4 1.4V7.8l4-1.4v12.3z"/>',
-  EXPAND:
-    '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>',
-  COLLAPSE:
-    '<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>',
-};
-
-export type ControlButtonOptions = {
-  /** Accessible label for screen readers */
-  ariaLabel: string;
-  /** Tooltip text shown on hover */
-  title: string;
-  /** SVG path data or element for the button icon */
-  iconSvg: string;
-  /** Additional CSS classes to apply */
-  className?: string;
-  /** Button type, defaults to 'button' */
-  type?: 'button' | 'submit' | 'reset';
-  /** Whether this button controls a popup/dialog */
-  hasPopup?: boolean;
-};
-
-/**
- * Creates a standardized control button with proper accessibility attributes
- * and consistent styling via the `ol-btn` base class.
- */
-export const createControlButton = (options: ControlButtonOptions): HTMLButtonElement => {
-  const { ariaLabel, title, iconSvg, className = '', type = 'button', hasPopup = false } = options;
-
-  const button = document.createElement('button');
-
-  button.setAttribute('aria-label', ariaLabel);
-  button.setAttribute('title', title);
-  button.type = type;
-  button.className = `ol-btn ${className}`.trim();
-
-  if (hasPopup) {
-    button.setAttribute('aria-haspopup', 'dialog');
-    button.setAttribute('aria-expanded', 'false');
-  }
-
-  // Create SVG icon
-  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-
-  icon.setAttribute('width', '20');
-  icon.setAttribute('height', '20');
-  icon.setAttribute('viewBox', '0 0 24 24');
-  icon.setAttribute('fill', 'currentColor');
-  icon.setAttribute('aria-hidden', 'true');
-  icon.innerHTML = iconSvg;
-
-  button.appendChild(icon);
-
-  return button;
-};