map-gl-offline 0.1.0-alpha.0

package/dist/ui/components/RegionList.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Regions list component for the offline manager - Modern, compact design
+ * Refactored to use modular Button components
+ */
+import { BaseComponent } from './shared/BaseComponent';
+import type { StoredRegion } from '../../types';
+export interface RegionsListProps {
+    regions: StoredRegion[];
+    onDeleteRegion?: (regionId: string) => void;
+    onShowRegionDetails?: (regionId: string) => void;
+    onFocusRegion?: (regionId: string) => void;
+    onImportExport?: (regionId: string) => void;
+    formatBytes?: (bytes: number) => string;
+}
+export declare class RegionsList extends BaseComponent {
+    private props;
+    constructor(props: RegionsListProps);
+    protected createElement(): HTMLElement;
+    updateRegions(regions: StoredRegion[]): void;
+    private render;
+    private createRegionCard;
+    private createRegionActions;
+}
+export declare function createRegionsList(props: RegionsListProps): HTMLDivElement;

package/dist/ui/components/shared/BaseComponent.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Base Component Class
+ * Provides common functionality for UI components
+ */
+export interface ComponentConfig {
+    className?: string;
+    id?: string;
+    events?: {
+        [event: string]: EventListener;
+    };
+}
+export declare abstract class BaseComponent {
+    protected element: HTMLElement;
+    protected config: ComponentConfig;
+    protected isMounted: boolean;
+    protected eventListeners: Map<string, EventListener>;
+    constructor(config?: ComponentConfig);
+    /**
+     * Create the root element
+     */
+    protected abstract createElement(): HTMLElement;
+    /**
+     * Apply configuration to element
+     */
+    protected applyConfig(): void;
+    /**
+     * Bind event listeners
+     */
+    protected bindEvents(): void;
+    /**
+     * Add event listener with cleanup tracking
+     */
+    protected addEventListener(event: string, handler: EventListener): void;
+    /**
+     * Remove all tracked event listeners
+     */
+    protected removeAllEventListeners(): void;
+    /**
+     * Get the element
+     */
+    getElement(): HTMLElement;
+    /**
+     * Mount to parent
+     */
+    mount(parent: HTMLElement): Promise<void>;
+    /**
+     * Unmount from parent
+     */
+    unmount(): Promise<void>;
+    /**
+     * Lifecycle hook - called after mounting
+     */
+    protected onMount?(): Promise<void>;
+    /**
+     * Lifecycle hook - called before unmounting
+     */
+    protected onUnmount?(): Promise<void>;
+    /**
+     * Update component
+     */
+    update(): Promise<void>;
+    /**
+     * Lifecycle hook - called during updates
+     */
+    protected onUpdate?(): Promise<void>;
+    /**
+     * Destroy component
+     */
+    destroy(): void;
+    /**
+     * Update element content
+     */
+    setContent(content: string | HTMLElement): void;
+    /**
+     * Show element
+     */
+    show(): void;
+    /**
+     * Hide element
+     */
+    hide(): void;
+    /**
+     * Toggle visibility
+     */
+    toggle(): void;
+}

package/dist/ui/components/shared/Button.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Reusable Button Component
+ * Provides a modular button with progress badge functionality
+ */
+import { BaseComponent, ComponentConfig } from './BaseComponent';
+export interface ButtonConfig extends ComponentConfig {
+    text?: string;
+    icon?: string;
+    title?: string;
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+    showProgressBadge?: boolean;
+}
+export declare class Button extends BaseComponent {
+    protected config: ButtonConfig;
+    private progressBadge?;
+    constructor(config?: ButtonConfig);
+    protected createElement(): HTMLElement;
+    private setupButton;
+    private getVariantClasses;
+    private getSizeClasses;
+    private createProgressBadge;
+    /**
+     * Update button text
+     */
+    setText(text: string): void;
+    /**
+     * Update button state
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Update progress badge
+     */
+    updateProgressBadge(text: string, visible: boolean): void;
+    /**
+     * Show progress badge
+     */
+    showProgressBadge(text?: string): void;
+    /**
+     * Hide progress badge
+     */
+    hideProgressBadge(): void;
+}

package/dist/ui/components/shared/List.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Reusable List Component
+ * Provides a modular list with customizable item rendering
+ */
+import { BaseComponent, ComponentConfig } from './BaseComponent';
+export interface ListItemConfig {
+    id: string;
+    data: unknown;
+    template?: string;
+    actions?: Array<{
+        label: string;
+        action: string;
+        variant?: 'primary' | 'secondary' | 'danger';
+        icon?: string;
+    }>;
+}
+export interface ListConfig extends ComponentConfig {
+    items?: ListItemConfig[];
+    emptyText?: string;
+    itemTemplate?: (item: unknown) => string;
+    onItemAction?: (action: string, itemId: string, item: unknown) => void;
+    onItemClick?: (itemId: string, item: unknown) => void;
+}
+export declare class List extends BaseComponent {
+    protected config: ListConfig;
+    private listContainer?;
+    constructor(config?: ListConfig);
+    protected createElement(): HTMLElement;
+    private createListStructure;
+    private renderItems;
+    private renderEmptyState;
+    private createItemElement;
+    private getDefaultItemTemplate;
+    private createActionsContainer;
+    private getActionButtonClasses;
+    /**
+     * Update list items
+     */
+    setItems(items: ListItemConfig[]): void;
+    /**
+     * Add item to list
+     */
+    addItem(item: ListItemConfig): void;
+    /**
+     * Remove item from list
+     */
+    removeItem(itemId: string): void;
+    /**
+     * Update specific item
+     */
+    updateItem(itemId: string, newData: unknown): void;
+    /**
+     * Clear all items
+     */
+    clear(): void;
+}

package/dist/ui/components/shared/MapControlButton.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Control Button Component
+ * Refactored from ButtonManager to be more reusable
+ */
+import { BaseComponent, ComponentConfig } from './BaseComponent';
+export interface ControlButtonConfig extends ComponentConfig {
+    title?: string;
+    icon?: string;
+    onToggle?: () => void;
+}
+export declare class ControlButton extends BaseComponent {
+    private button;
+    private progressBadge;
+    private buttonConfig;
+    constructor(config?: ControlButtonConfig);
+    protected createElement(): HTMLElement;
+    /**
+     * Update button text and state
+     */
+    updateButton(text: string, disabled: boolean): void;
+    /**
+     * Update progress badge
+     */
+    updateProgressBadge(text: string, visible: boolean): void;
+    /**
+     * Reset to default state
+     */
+    resetToDefault(): void;
+    /**
+     * Set button active state
+     */
+    setActive(active: boolean): void;
+    /**
+     * Override destroy to remove specific event listeners
+     */
+    destroy(): void;
+}

package/dist/ui/components/shared/Modal.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Reusable Modal Component
+ * Provides a modular modal with configurable content and actions
+ */
+import { BaseComponent, ComponentConfig } from './BaseComponent';
+export interface ModalConfig extends ComponentConfig {
+    title?: string;
+    subtitle?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closable?: boolean;
+    backdrop?: boolean;
+    showThemeToggle?: boolean;
+    onClose?: () => void;
+    onThemeToggle?: () => void;
+}
+export declare class Modal extends BaseComponent {
+    protected config: ModalConfig;
+    private backdrop?;
+    private modalContent?;
+    private header?;
+    private body?;
+    private footer?;
+    constructor(config?: ModalConfig);
+    protected createElement(): HTMLElement;
+    private createModalStructure;
+    private createHeader;
+    private getSizeClasses;
+    private setupEventListeners;
+    /**
+     * Set modal body content
+     */
+    setContent(content: string | HTMLElement): void;
+    /**
+     * Set modal footer content
+     */
+    setFooter(content: string | HTMLElement): void;
+    /**
+     * Show the modal
+     */
+    show(): void;
+    /**
+     * Hide the modal
+     */
+    hide(): void;
+    /**
+     * Clean up event listeners
+     */
+    protected onUnmount(): Promise<void>;
+}

package/dist/ui/components/shared/Panel.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Panel Component
+ * Refactored panel management into reusable component
+ */
+import { BaseComponent, ComponentConfig } from './BaseComponent';
+export interface PanelConfig extends ComponentConfig {
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    closable?: boolean;
+    onClose?: () => void;
+}
+export declare class Panel extends BaseComponent {
+    private header;
+    private body;
+    private footer;
+    private panelConfig;
+    constructor(config?: PanelConfig);
+    protected createElement(): HTMLElement;
+    private createPanelStructure;
+    /**
+     * Set panel title
+     */
+    setTitle(title: string): void;
+    /**
+     * Set panel body content
+     */
+    setBody(content: string | HTMLElement): void;
+    /**
+     * Set panel footer content
+     */
+    setFooter(content: string | HTMLElement | null): void;
+    /**
+     * Open panel
+     */
+    open(): void;
+    /**
+     * Close panel
+     */
+    close(): void;
+    /**
+     * Get body element for direct manipulation
+     */
+    getBody(): HTMLElement | null;
+    /**
+     * Get header element
+     */
+    getHeader(): HTMLElement | null;
+    /**
+     * Get footer element
+     */
+    getFooter(): HTMLElement | null;
+}

package/dist/ui/components/shared/PanelContent.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Panel Content Renderer Component
+ * Refactored from PanelRenderer to be more focused and reusable
+ */
+import { BaseComponent } from './BaseComponent';
+import { OfflineMapManager } from '../../../managers/offlineMapManager';
+import { DownloadManager } from '../../managers/downloadManager';
+import { ModalManager } from '../../modals/modalManager';
+export interface ContentRendererConfig {
+    offlineManager: OfflineMapManager;
+    downloadManager: DownloadManager;
+    modalManager: ModalManager;
+    onClose: () => void;
+    onAddRegion: () => void;
+    onFocusRegion: (regionId: string) => void;
+}
+export declare class PanelContentRenderer extends BaseComponent {
+    private offlineManager;
+    private downloadManager;
+    private modalManager;
+    private contentConfig;
+    constructor(config: ContentRendererConfig);
+    protected createElement(): HTMLElement;
+    /**
+     * Render content into a container
+     */
+    render(container: HTMLElement): Promise<void>;
+    private createMainContent;
+    private setupContentEventListeners;
+    private findAndShowRegionDetails;
+    private showRegionDetails;
+    private deleteRegion;
+    private downloadRegion;
+    private showImportExportModal;
+    /**
+     * Refresh content
+     */
+    refresh(): Promise<void>;
+}

package/dist/ui/components/shared/RegionDrawingTool.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Region Drawing Component
+ * Refactored from RegionControl to be more focused and reusable
+ */
+import { BaseComponent } from './BaseComponent';
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { DownloadManager } from '../../managers/downloadManager';
+import { ModalManager } from '../../modals/modalManager';
+export interface RegionDrawingConfig {
+    map: MaplibreMap;
+    downloadManager: DownloadManager;
+    modalManager: ModalManager;
+    container: HTMLElement;
+    onRegionSaved: () => void;
+    getCurrentStyleUrl: () => string;
+}
+export declare class RegionDrawing extends BaseComponent {
+    private map;
+    private downloadManager;
+    private modalManager;
+    private drawingConfig;
+    private isDrawing;
+    private drawingHandler;
+    constructor(config: RegionDrawingConfig);
+    protected createElement(): HTMLElement;
+    /**
+     * Start region selection mode
+     */
+    startSelection(): void;
+    /**
+     * Stop region selection mode
+     */
+    stopSelection(): void;
+    private setupDrawingMode;
+    private cleanupDrawingMode;
+    private showDrawingInstructions;
+    private hideDrawingInstructions;
+    private handleMapClick;
+    private createBoundsAroundPoint;
+    private showRegionForm;
+    /**
+     * Calculate approximate area from bounds in km²
+     * This is a simplified calculation for display purposes
+     */
+    private calculateAreaFromBounds;
+    /**
+     * Check if currently in drawing mode
+     */
+    isInDrawingMode(): boolean;
+    /**
+     * Cleanup when component is destroyed
+     */
+    cleanup(): void;
+}

package/dist/ui/components/shared/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared Components Index
+ * Exports all reusable components
+ */
+export { BaseComponent, ComponentConfig } from './BaseComponent';
+export { ControlButton, ControlButtonConfig } from './MapControlButton';
+export { Panel, PanelConfig } from './Panel';
+export { PanelContentRenderer, ContentRendererConfig } from './PanelContent';
+export { RegionDrawing, RegionDrawingConfig } from './RegionDrawingTool';
+export { Button, ButtonConfig } from './Button';
+export { Modal, ModalConfig } from './Modal';
+export { List, ListConfig, ListItemConfig } from './List';

package/dist/ui/controls/polygonControl.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Polygon Selection Control Component
+ * Handles polygon drawing, area calculation, and map visualization
+ */
+import type { Map as MaplibreMap } from 'maplibre-gl';
+export interface PolygonControlOptions {
+    onSave: (bounds: [number, number, number, number], area: number) => void;
+    onCancel: () => void;
+}
+export declare class PolygonControl {
+    private map;
+    private container;
+    private saveButton;
+    private areaDisplay;
+    private currentBounds;
+    private currentArea;
+    private options;
+    constructor(map: MaplibreMap, options: PolygonControlOptions);
+    /**
+     * Initialize polygon control mode
+     */
+    enter(): void;
+    /**
+     * Exit polygon control mode
+     */
+    exit(): void;
+    /**
+     * Get current selection bounds
+     */
+    getCurrentBounds(): [number, number, number, number] | null;
+    /**
+     * Get current selection area
+     */
+    getCurrentArea(): number;
+    /**
+     * Create the polygon control UI - area display at bottom center
+     */
+    private createUI;
+    /**
+     * Create save polygon button
+     */
+    createSaveButton(parentContainer: HTMLElement): void;
+    /**
+     * Remove UI elements
+     */
+    private removeUI;
+    /**
+     * Show save button
+     */
+    private showSaveButton;
+    /**
+     * Hide save button
+     */
+    private hideSaveButton;
+    /**
+     * Handle save button click
+     */
+    private handleSave;
+    /**
+     * Trigger save programmatically
+     */
+    triggerSave(): void;
+    /**
+     * Add map event listeners
+     */
+    private addMapListeners;
+    /**
+     * Remove map event listeners
+     */
+    private removeMapListeners;
+    /**
+     * Handle map move/zoom events
+     */
+    private handleMapMove;
+    /**
+     * Update polygon visualization based on current map bounds
+     */
+    private updateVisualization;
+    /**
+     * Remove polygon visualization from map
+     */
+    private removeVisualization;
+}

package/dist/ui/controls/regionControl.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Region Control Component
+ * Manages region selection, form modal, and saves
+ */
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { DownloadManager } from '../managers/downloadManager';
+import { ModalManager } from '../modals/modalManager';
+export interface RegionControlOptions {
+    map: MaplibreMap;
+    downloadManager: DownloadManager;
+    modalManager: ModalManager;
+    container: HTMLDivElement;
+    onRegionSaved?: () => void;
+    styleUrl: string;
+}
+export declare class RegionControl {
+    private map;
+    private downloadManager;
+    private modalManager;
+    private container;
+    private saveButton;
+    private polygonControl;
+    private regionFormModal;
+    private options;
+    private isActive;
+    constructor(options: RegionControlOptions);
+    /**
+     * Start region selection mode
+     */
+    startSelection(): void;
+    /**
+     * Cancel region selection
+     */
+    cancelSelection(): void;
+    /**
+     * Create save polygon button
+     */
+    private createSaveButton;
+    /**
+     * Remove save button
+     */
+    private removeSaveButton;
+    /**
+     * Handle save button click
+     */
+    private handleSaveClick;
+    /**
+     * Show region form modal
+     */
+    private showRegionForm;
+    /**
+     * Handle form cancellation
+     */
+    private handleFormCancel;
+    /**
+     * Handle region save from form
+     */
+    private handleRegionSave;
+    /**
+     * Check if region selection is active
+     */
+    isSelectionActive(): boolean;
+    /**
+     * Update the style URL for new regions
+     */
+    updateStyleUrl(newStyleUrl: string): void;
+    /**
+     * Cleanup when control is removed
+     */
+    cleanup(): void;
+}

package/dist/ui/managers/ControlButtonManager.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Button Manager Component
+ * Manages the main control button and progress badge states
+ * Refactored to use modular Button component
+ */
+export interface ButtonManagerOptions {
+    onTogglePanel: () => void;
+}
+export declare class ButtonManager {
+    private container;
+    private button;
+    private options;
+    constructor(options: ButtonManagerOptions);
+    /**
+     * Get the container element
+     */
+    getContainer(): HTMLDivElement;
+    /**
+     * Update button text and state
+     */
+    updateButton(text: string, disabled: boolean): void;
+    /**
+     * Update progress badge
+     */
+    updateProgressBadge(text: string, visible: boolean): void;
+    /**
+     * Reset button to default state
+     */
+    resetToDefault(): void;
+    /**
+     * Create container element
+     */
+    private createContainer;
+    /**
+     * Create main button using modular Button component
+     */
+    private createButton;
+    /**
+     * Cleanup when removed
+     */
+    cleanup(): void;
+}