@tpzdsp/next-toolkit 2.0.1 → 2.1.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "2.0.1",
+  "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

@@ -211,8 +211,8 @@ export const Geocoder = ({
       </label>
 
       <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"
       >
         <IoSearch
           size={20}

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;
-};