@vicaniddouglas/js_aide 1.5.1

package/declarations.d.ts

@@ -0,0 +1,1465 @@
+declare module "@vicaniddouglas/js_aide" {
+  // =========================================================
+  // Router (from router.js)
+  // =========================================================
+  interface NavigationContext {
+    from: string | null;
+    params: { [key: string]: string };
+    query: { [key: string]: string };
+    hash: string;
+  }
+
+  interface RouterOptions {
+    replace?: boolean;
+  }
+
+  interface BeforeNavigateGuard {
+    (
+      to: string,
+      context: NavigationContext,
+    ): boolean | string | Promise<boolean | string>;
+  }
+
+  interface RouterNavigatedDetail {
+    path: string;
+    pathname: string;
+    params: { [key: string]: string };
+    query: { [key: string]: string };
+    hash: string;
+    previousPath: string | null;
+    replace: boolean;
+  }
+
+  interface RouterInitializedDetail {
+    path: string;
+  }
+
+  interface RouterPopstateDetail {
+    path: string;
+    state: any;
+  }
+
+  interface RouterBeforeViewChangeDetail {
+    from: string | null;
+    to: string;
+    fromPath: string | null;
+    toPath: string;
+    params: { [key: string]: string };
+  }
+
+  interface RouterAfterViewChangeDetail {
+    viewId: string;
+    path: string;
+    params: { [key: string]: string };
+    viewElement: HTMLElement;
+  }
+
+  interface RouterBeforeViewHideDetail {
+    viewId: string;
+    viewElement: HTMLElement;
+  }
+
+  interface RouterAfterViewHideDetail {
+    viewId: string;
+    viewElement: HTMLElement;
+  }
+
+  interface RouterErrorDetail {
+    error: Error;
+    path: string;
+  }
+
+  interface RouterCurrentRoute {
+    path: string | null;
+    viewId: string | null;
+    viewElement: HTMLElement | null;
+  }
+
+  export class Router {
+    constructor(routes: { [path: string]: string }, defaultPath?: string);
+    beforeNavigate: BeforeNavigateGuard | null;
+    navigate(path: string, options?: RouterOptions): Promise<boolean>;
+    getCurrentRoute(): RouterCurrentRoute;
+    destroy(): void;
+    goToDefault(options?: RouterOptions): Promise<boolean>;
+    hasRoute(path: string): boolean;
+  }
+
+  // =========================================================
+  // Validator (from validator.js)
+  // =========================================================
+  type FieldType =
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | HTMLSelectElement
+    | HTMLElement;
+
+  interface ValidationResult {
+    isValid: boolean;
+    error: string | null;
+    cleanedName?: string;
+    cleanedNumber?: string;
+    prefix?: string;
+  }
+
+  interface ValidateNameOptions {
+    minLength?: number;
+    maxLength?: number;
+    allowNumbers?: boolean;
+    allowSpecialChars?: boolean;
+  }
+
+  interface ValidatePhoneNumberOptions {
+    strict?: boolean;
+  }
+
+  export function validateMandatoryFields(
+    fields: NodeListOf<FieldType> | FieldType[],
+  ): boolean;
+
+  export function validateFieldByType(field: FieldType): boolean;
+
+  export function validateName(
+    name: string,
+    options?: ValidateNameOptions,
+  ): ValidationResult;
+
+  export function validatePhoneNumber(
+    phone: string,
+    options?: ValidatePhoneNumberOptions,
+  ): ValidationResult;
+
+  export function applyFieldValidation(
+    field: HTMLElement,
+    validationResult: ValidationResult,
+  ): boolean;
+
+  export function validateNameField(
+    nameField: HTMLInputElement,
+    options?: ValidateNameOptions,
+  ): boolean;
+
+  export function validatePhoneField(
+    phoneField: HTMLInputElement,
+    options?: ValidatePhoneNumberOptions,
+  ): boolean;
+
+  // =========================================================
+  // inputHandlers (from DOMelementHandlers.js)
+  // =========================================================
+  interface AllowOnlyNumbersOptions {
+    allowDecimals?: boolean;
+    maxDecimals?: number;
+    allowNegative?: boolean;
+  }
+
+  interface FormatNumberInputOptions {
+    maxDecimalPlaces?: number;
+    allowNegative?: boolean;
+  }
+
+  interface ProvideOtherSelectOptionOptions {
+    promptText?: string;
+    formatWithCommas?: boolean;
+    validator?: (value: string) => boolean | string;
+  }
+
+  interface FilterElementsByAnySelectorOptions {
+    itemSelector?: string;
+    caseSensitive?: boolean;
+  }
+
+  interface CharacterCounterOptions {
+    showPercentage?: boolean;
+    warningThreshold?: number;
+  }
+
+  export const inputHandlers: {
+    allowOnlyNumbers(
+      inputElement: HTMLInputElement,
+      options?: AllowOnlyNumbersOptions,
+    ): void;
+    formatNumberInput(
+      input: HTMLInputElement,
+      options?: FormatNumberInputOptions,
+    ): void; // Note: There are two formatNumberInput functions. This is the one exported by inputHandlers object.
+    provideOtherSelectOption(
+      selectElement: HTMLSelectElement,
+      options?: ProvideOtherSelectOptionOptions,
+    ): void;
+    filterElementsByAnySelector(
+      searchInput: HTMLInputElement,
+      container: HTMLElement,
+      contentSelectors?: string[],
+      options?: FilterElementsByAnySelectorOptions,
+    ): void;
+    characterCounter(
+      input: HTMLInputElement | HTMLTextAreaElement,
+      counterElement: HTMLElement,
+      maxLength: number,
+      options?: CharacterCounterOptions,
+    ): void;
+  };
+
+  /**
+   * SmartInput - A versatile input management system for creating specialized input fields
+   */
+  interface InputOptions {
+    id: string;
+    labelText: string;
+    container: HTMLElement;
+    wrapperClasses?: string[];
+    inputClasses?: string[];
+  }
+
+  interface NumberInputOptions {
+    placeholder?: string;
+  }
+
+  interface FormattedNumberInputOptions {
+    placeholder?: string;
+  }
+
+  interface SearchableInputItem {
+    key: string;
+    value: any;
+  }
+
+  interface SearchableInputOptions {
+    data?: SearchableInputItem[];
+    placeholder?: string;
+    dropdownClasses?: string[];
+  }
+
+  interface LimitedTextInputOptions {
+    maxLength: number;
+    allowedCharactersString?: string;
+    placeholder?: string;
+  }
+
+  interface SearchableInputResult {
+    inputElement: HTMLInputElement;
+    getValue(): any;
+    setData(newData: SearchableInputItem[]): void;
+  }
+
+  export class SmartInput {
+    constructor();
+    /** Stores references to all created inputs */
+    inputs: { [id: string]: HTMLInputElement };
+
+    /**
+     * Retrieves an input element by its ID
+     * @param id - ID of the input to retrieve
+     */
+    getInput(id: string): HTMLInputElement | null;
+
+    /**
+     * Creates a text input that only accepts numeric characters
+     */
+    createNumberInput(
+      options: InputOptions & NumberInputOptions,
+    ): HTMLInputElement | null;
+
+    /**
+     * Creates a formatted number input with comma separators and decimal support
+     */
+    createFormattedNumberInput(
+      options: InputOptions & FormattedNumberInputOptions,
+    ): HTMLInputElement | null;
+
+    /**
+     * Creates a searchable input with dropdown functionality
+     */
+    createSearchableInput(
+      options: InputOptions & SearchableInputOptions,
+    ): SearchableInputResult | null;
+
+    /**
+     * Creates a text input with character limit and optional character restrictions
+     */
+    createLimitedTextInput(
+      options: InputOptions & LimitedTextInputOptions,
+    ): HTMLInputElement | null;
+  }
+
+  // =========================================================
+  // requests (from requests.js)
+  // =========================================================
+  interface RequestHandlerConfig {
+    apiUrl?: string;
+    timeout?: number;
+    maxRetries?: number;
+    retryStrategy?: "exponential" | "linear" | "fibonacci";
+    csrfToken?: string;
+    authToken?: string;
+    environment?: "development" | "production";
+    keys?: {
+      globalConfig?: string;
+      authToken?: string;
+      csrfToken?: string;
+      csrfCookie?: string;
+    };
+  }
+
+  interface RequestOptions {
+    method?: string;
+    endpoint: string;
+    payload?: object | FormData | null;
+    headers?: { [key: string]: string };
+    timeout?: number;
+    maxRetries?: number;
+    retryStrategy?: "exponential" | "linear" | "fibonacci";
+    useQueue?: boolean;
+    priority?: number;
+    responseType?: "json" | "text";
+    showLoading?: (isLoading: boolean) => void;
+  }
+
+  type RequestInterceptor = (
+    config: RequestOptions,
+  ) => RequestOptions | Promise<RequestOptions>;
+  type ResponseInterceptor = (response: {
+    data: any;
+    status: number;
+    url: string;
+  }) => any | Promise<any>;
+  type ErrorInterceptor = (error: XMLHttpRequest) => void;
+
+  interface InterceptorMethods {
+    request(onFulfilled: RequestInterceptor, onRejected?: Function): number;
+    response(onFulfilled: ResponseInterceptor, onRejected?: Function): number;
+    error(handler: ErrorInterceptor): void;
+  }
+
+  interface QueueStatus {
+    active: number;
+    pending: number;
+  }
+
+  export const sendRequest: (options?: RequestOptions) => Promise<any>;
+  export const initRequestHandler: (options?: RequestHandlerConfig) => void;
+  export const interceptors: InterceptorMethods;
+  export const getQueueStatus: () => QueueStatus;
+
+  // =========================================================
+  // dates (from dates.js)
+  // =========================================================
+  interface DateValidationOptions {
+    showAlert?: boolean;
+  }
+
+  interface HumanizeDateOptions {
+    format?: "short" | "medium" | "long" | "full" | "weekday";
+    locale?: string;
+    includeYear?: boolean;
+  }
+
+  interface RelativeTimeOptions {
+    locale?: string;
+  }
+
+  interface TimeAgoOptions {
+    showSeconds?: boolean;
+  }
+
+  type TimeUnit = "days" | "weeks" | "months" | "years";
+
+  interface GetFutureDateOptions {
+    startDate?: string;
+  }
+
+  interface GetDaysBetweenOptions {
+    inclusiveEndDate?: boolean;
+  }
+
+  export function validateDate(
+    dateString: string,
+    options?: DateValidationOptions,
+  ): boolean;
+  export function humanizeDate(
+    dateString: string,
+    options?: HumanizeDateOptions,
+  ): string;
+  export function getRelativeTime(
+    dateString: string,
+    options?: RelativeTimeOptions,
+  ): string;
+  export function getCurrentDate(): string;
+  export function getDateYesterday(): string;
+  export function timeAgo(
+    timestamp: string | Date,
+    options?: TimeAgoOptions,
+  ): string;
+
+  export function getEndDate(
+    startDate: string,
+    duration: number,
+    unit: TimeUnit,
+  ): string;
+
+  export function getDateRange(
+    keyword:
+      | "today"
+      | "yesterday"
+      | "thisWeek"
+      | "lastWeek"
+      | "thisMonth"
+      | "lastMonth",
+  ): [string, string];
+  export function getDateAgo(amount: number, unit: TimeUnit): string;
+  export function getDateTomorrow(): string;
+  export function getFutureDateRange(
+    keyword: "tomorrow" | "nextWeek" | "nextMonth" | "nextYear",
+  ): [string, string];
+  export function getDaysBetween(
+    startDate: string,
+    endDate: string,
+    options?: GetDaysBetweenOptions,
+  ): number;
+  export function getFutureDate(
+    amount: number,
+    unit: TimeUnit,
+    options?: GetFutureDateOptions,
+  ): string;
+  export function isFutureDate(dateString: string): boolean;
+  export function isPastDate(dateString: string): boolean;
+
+  // =========================================================
+  // fileManager (from fileManager.js)
+  // =========================================================
+  interface DownloadFileOptions {
+    maxSize?: number;
+    onProgress?: (progress: number) => void;
+    fallbackFormats?: boolean;
+    csvDelimiter?: string;
+    excelOptions?: any; // Consider more specific type if possible
+    pdfOptions?: any; // Consider more specific type if possible
+  }
+
+  type FileType = "csv" | "json" | "txt" | "excel" | "pdf";
+
+  interface TableData {
+    headers: string[][];
+    rows: string[][];
+    footers: string[][];
+  }
+
+  interface ExtractTableDataOptions {
+    rowClass?: string;
+    cellClass?: string;
+    headerRowClass?: string;
+    footerRowClass?: string;
+    includeFooter?: boolean;
+  }
+
+  export function downloadFile(
+    data: string | Blob | object | any[],
+    fileType: FileType,
+    fileName?: string,
+    options?: DownloadFileOptions,
+  ): Promise<void>;
+
+  export class DataExporter {
+    constructor(defaultFilename?: string);
+    exportToExcel(
+      table: HTMLElement,
+      options?: DownloadFileOptions & { filename?: string },
+    ): Promise<void>;
+    exportToCSV(
+      table: HTMLElement,
+      options?: DownloadFileOptions & { filename?: string; delimiter?: string },
+    ): Promise<void>;
+    exportToPDF(
+      table: HTMLElement,
+      options?: DownloadFileOptions & { filename?: string },
+    ): Promise<void>;
+    extractTableData(
+      table: HTMLElement,
+      options?: ExtractTableDataOptions,
+    ): TableData;
+    generateCsvContent(
+      tableData: TableData,
+      delimiter: string,
+      lineEnding: string,
+      includeBOM: boolean,
+    ): string;
+    escapeCsvValue(value: any, delimiter: string): string;
+  }
+
+  // =========================================================
+  // camera (from camera.js)
+  // =========================================================
+  interface CameraModalOptions {
+    previewContainer?: string | HTMLElement | null;
+    onPictureTaken?: (imageData: string) => void;
+  }
+
+  export class CameraModal {
+    constructor(options?: CameraModalOptions);
+    open(): Promise<void>;
+    close(): void;
+    capture(): void;
+    usePicture(): void;
+    retake(): void;
+    switchCamera(): Promise<void>;
+  }
+
+  // =========================================================
+  // figures (from figures.js)
+  // =========================================================
+  type RoundingMethod = "round" | "floor" | "ceil" | "nearestUpper";
+
+  interface FormatNumberOptions {
+    decimalPlaces?: number;
+    roundToNearest?: number;
+    roundMethod?: RoundingMethod;
+    useGrouping?: boolean;
+  }
+
+  interface FormatCurrencyOptions {
+    currency?: string;
+    symbol?: string;
+    decimalPlaces?: number;
+    useGrouping?: boolean;
+  }
+
+  interface FormatPercentageOptions {
+    decimalPlaces?: number;
+    useGrouping?: boolean;
+  }
+
+  interface AbbreviateNumberOptions {
+    decimalPlaces?: number;
+    suffixes?: string[];
+  }
+
+  export function roundToNearest(
+    value: number,
+    nearest?: number,
+    method?: RoundingMethod,
+  ): number;
+  export function formatNumber(
+    value: number,
+    options?: FormatNumberOptions,
+  ): string;
+  export function formatCurrency(
+    value: number,
+    options?: FormatCurrencyOptions,
+  ): string;
+  export function formatPercentage(
+    value: number,
+    options?: FormatPercentageOptions,
+  ): string;
+  export function abbreviateNumber(
+    value: number,
+    options?: AbbreviateNumberOptions,
+  ): string;
+  export function unformatNumber(formattedNumber: string): string;
+  export function getNumericValue(input: HTMLInputElement): number;
+  export function formatNumberInput(
+    input: HTMLInputElement,
+    options?: FormatNumberInputOptions,
+  ): void; // Note: This is from figures.js, not inputHandlers
+  export function getRawInputValue(input: HTMLInputElement): string;
+  export function setInputValue(
+    input: HTMLInputElement,
+    value: number | string,
+  ): void;
+
+  // =========================================================
+  // dependencyManager (from dependencyManager.js)
+  // =========================================================
+  interface DependencyConfig {
+    name: string;
+    cdn: string;
+    check: () => boolean;
+    requires?: string[];
+    integrity?: string;
+    fallbacks?: string[];
+    maxRetries?: number;
+  }
+
+  export class DependencyManager {
+    register(key: string, config: DependencyConfig): void;
+    hasDependency(libName: string): boolean;
+    ensureDependency(
+      libName: string,
+      fallbackAction?: () => any,
+    ): Promise<boolean>;
+  }
+
+  export const dependencyManager: DependencyManager; // Export the singleton instance
+
+  // =========================================================
+  // Locations (from ug_locations.js)
+  // =========================================================
+
+  /**
+   * Represents a location entity with ID and name
+   */
+  interface LocationItem {
+    id: string;
+    name: string;
+  }
+
+  /**
+   * Complete address object returned when user confirms location selection
+   */
+  interface SelectedAddress {
+    region: LocationItem;
+    district: LocationItem;
+    county: LocationItem;
+    subcounty: LocationItem;
+    village: LocationItem;
+  }
+
+  /**
+   * Error object returned when modal is cancelled
+   */
+  interface AddressCancellationError extends Error {
+    message: string;
+    // Additional properties if any
+  }
+
+  /**
+   * Locations utility object for fetching hierarchical location data
+   */
+  export const Locations: {
+    /**
+     * Get all regions
+     * @returns Array of region objects with id and name
+     */
+    getRegions(): LocationItem[];
+
+    /**
+     * Get districts belonging to a specific region
+     * @param regionId - The ID of the region
+     * @returns Array of district objects with id and name
+     */
+    getDistricts(regionId: string): LocationItem[];
+
+    /**
+     * Get counties belonging to a specific district
+     * @param districtId - The ID of the district
+     * @returns Array of county objects with id and name
+     */
+    getCounties(districtId: string): LocationItem[];
+
+    /**
+     * Get sub-counties belonging to a specific county
+     * @param countyId - The ID of the county
+     * @returns Array of sub-county objects with id and name
+     */
+    getSubCounties(countyId: string): LocationItem[];
+
+    /**
+     * Get parishes belonging to a specific sub-county
+     * @param subCountyId - The ID of the sub-county
+     * @returns Array of parish objects with id and name
+     */
+    getParishes(subCountyId: string): LocationItem[];
+
+    /**
+     * Get villages belonging to a specific parish
+     * @param parishId - The ID of the parish
+     * @returns Array of village objects with id and name
+     */
+    getVillages(parishId: string): LocationItem[];
+  };
+
+  /**
+   * Opens a modal for selecting address/location information with cascading dropdowns
+   *
+   * This function displays a modal with five hierarchical dropdown selects (Region, District,
+   * County, Subcounty, Village) that allow users to select a complete address. The selections
+   * cascade such that each dropdown depends on the previous selection.
+   *
+   * @param onConfirm - Callback function executed when user confirms location selection.
+   *                    Receives a location object containing the selected address details.
+   *                    Example: `(location) => { console.log(location); }`
+   * @param onCancel - Optional callback function executed when user cancels or closes the modal.
+   *                   Receives an Error object with cancellation reason.
+   *                   Example: `(error) => { console.log(error.message); }`
+   *
+   * @returns The modal DOM element if successfully created, null if onConfirm callback is missing
+   *
+   * @throws {Alert} Shows an alert if the required onConfirm callback is not provided
+   *
+   * @example
+   * // Basic usage with required callback
+   * getAddress(
+   *   (location) => {
+   *     console.log('Selected location:', location);
+   *     // location structure:
+   *     // {
+   *     //   region: { id: '1', name: 'Central Region' },
+   *     //   district: { id: '2', name: 'Kampala District' },
+   *     //   county: { id: '3', name: 'Kampala Central' },
+   *     //   subcounty: { id: '4', name: 'Central Division' },
+   *     //   village: { id: '5', name: 'Nakasero Village' }
+   *     // }
+   *   }
+   * );
+   */
+  export function getAddress(
+    onConfirm: (location: SelectedAddress) => void,
+    onCancel?: (error: AddressCancellationError) => void,
+  ): HTMLElement | null;
+
+  // =========================================================
+  // Icons (from icons.js)
+  // =========================================================
+
+  /**
+   * Collection of SVG icon functions that return SVG strings
+   * All icons use "currentColor" so they can be colored via CSS
+   */
+  export const icons: {
+    /**
+     * Heart/favorite icon
+     */
+    heartIcon(): string;
+
+    /**
+     * Left arrow icon (pointing left)
+     */
+    leftArrowIcon(): string;
+
+    /**
+     * Right arrow icon (pointing right)
+     */
+    rightArrowIcon(): string;
+
+    /**
+     * Right arrow icon alternative
+     */
+    rightArrowIcon2(): string;
+
+    /**
+     * Left arrow icon alternative
+     */
+    leftArrowIcon2(): string;
+
+    /**
+     * Close/X icon for modals, notifications, etc.
+     */
+    closeIcon(): string;
+
+    /**
+     * Close icon alternative
+     */
+    closeIcon2(): string;
+
+    /**
+     * Close icon alternative
+     */
+    closeIcon3(): string;
+
+    /**
+     * Menu/hamburger icon (three horizontal lines)
+     */
+    menuIcon(): string;
+
+    /**
+     * Hamburger menu icon alternative
+     */
+    hamburgerIcon(): string;
+
+    /**
+     * Hamburger menu icon alternative
+     */
+    hamburgerIcon2(): string;
+
+    /**
+     * Hamburger menu icon alternative
+     */
+    hamburgerIcon3(): string;
+
+    /**
+     * Search/magnifying glass icon
+     */
+    searchIcon(): string;
+
+    /**
+     * User/profile icon
+     */
+    userIcon(): string;
+
+    /**
+     * Settings/gear icon
+     */
+    settingsIcon(): string;
+
+    /**
+     * Logout/sign out icon
+     */
+    logoutIcon(): string;
+
+    /**
+     * Home icon
+     */
+    homeIcon(): string;
+
+    /**
+     * Profile icon (similar to user)
+     */
+    profileIcon(): string;
+
+    /**
+     * Notifications/bell icon
+     */
+    notificationsIcon(): string;
+
+    /**
+     * Messages/chat icon
+     */
+    messagesIcon(): string;
+
+    /**
+     * Add/plus icon
+     */
+    addIcon(): string;
+
+    /**
+     * Edit/pencil icon
+     */
+    editIcon(): string;
+
+    /**
+     * Delete/trash icon
+     */
+    deleteIcon(): string;
+
+    /**
+     * Save icon
+     */
+    saveIcon(): string;
+
+    /**
+     * Download icon
+     */
+    downloadIcon(): string;
+
+    /**
+     * Upload icon
+     */
+    uploadIcon(): string;
+
+    /**
+     * Graduate/cap icon for education
+     */
+    graduateIcon(): string;
+
+    /**
+     * Work/briefcase icon
+     */
+    workIcon(): string;
+
+    /**
+     * Work icon alternative
+     */
+    workIcon2(): string;
+
+    /**
+     * School/education icon
+     */
+    schoolIcon(): string;
+
+    /**
+     * School icon alternative
+     */
+    schoolIcon2(): string;
+
+    /**
+     * Book icon for learning/literature
+     */
+    bookIcon(): string;
+
+    /**
+     * Book icon alternative
+     */
+    bookIcon2(): string;
+
+    /**
+     * Certificate/award icon
+     */
+    certificateIcon(): string;
+
+    /**
+     * Certificate icon alternative
+     */
+    certificateIcon2(): string;
+
+    /**
+     * Experience icon
+     */
+    experienceIcon(): string;
+
+    /**
+     * Experience icon alternative
+     */
+    experienceIcon2(): string;
+
+    /**
+     * Skills icon
+     */
+    skillsIcon(): string;
+
+    /**
+     * Skills icon alternative
+     */
+    skillsIcon2(): string;
+
+    /**
+     * Projects icon
+     */
+    projectsIcon(): string;
+
+    /**
+     * Projects icon alternative
+     */
+    projectsIcon2(): string;
+
+    /**
+     * Language icon
+     */
+    languageIcon(): string;
+
+    /**
+     * Hobby/interest icon
+     */
+    hobbyIcon(): string;
+
+    /**
+     * Award/achievement icon
+     */
+    awardIcon(): string;
+
+    /**
+     * Award icon alternative
+     */
+    awardIcon2(): string;
+
+    /**
+     * Excel file icon
+     */
+    excelIcon(): string;
+
+    /**
+     * PDF file icon
+     */
+    pdfIcon(): string;
+
+    /**
+     * CSV file icon
+     */
+    csvIcon(): string;
+
+    /**
+     * Refresh/reload icon
+     */
+    refreshIcon(): string;
+
+    /**
+     * Refresh icon alternative
+     */
+    refreshIcon2(): string;
+
+    /**
+     * Brightness/theme icon
+     */
+    brightnessIcon(): string;
+
+    /**
+     * Brightness icon alternative
+     */
+    brightnessIcon2(): string;
+
+    /**
+     * Branch/fork icon
+     */
+    branchIcon(): string;
+
+    /**
+     * Branch icon alternative
+     */
+    branchIcon2(): string;
+
+    /**
+     * Phone icon
+     */
+    phoneIcon(): string;
+
+    /**
+     * Phone icon alternative
+     */
+    phoneIcon2(): string;
+
+    /**
+     * Email icon
+     */
+    emailIcon(): string;
+
+    /**
+     * Email icon alternative
+     */
+    emailIcon2(): string;
+
+    /**
+     * Location/pin icon
+     */
+    locationIcon(): string;
+
+    /**
+     * Location icon alternative
+     */
+    locationIcon2(): string;
+
+    /**
+     * Messenger/chat icon
+     */
+    messengerIcon(): string;
+
+    /**
+     * Messenger icon alternative
+     */
+    messengerIcon2(): string;
+
+    /**
+     * Toggle on/switch icon (on state)
+     */
+    toggleOnIcon(): string;
+
+    /**
+     * Toggle on icon alternative
+     */
+    toggleOnIcon2(): string;
+
+    /**
+     * Toggle on icon alternative
+     */
+    toggleOnIcon3(): string;
+
+    /**
+     * Toggle off/switch icon (off state)
+     */
+    toggleOffIcon(): string;
+
+    /**
+     * Toggle off icon alternative
+     */
+    toggleOffIcon2(): string;
+
+    /**
+     * Toggle off icon alternative
+     */
+    toggleOffIcon3(): string;
+
+    crashIcon(): string;
+
+    networkErrorIcon(): string;
+
+    smsIcon(): string;
+    smsIcon2(): string;
+    smsIcon3(): string;
+    logsIcon(): string;
+    institutionIcon(): string;
+    medicalLabIcon(): string;
+    firstAidIcon(): string;
+    shieldIcon(): string;
+    // PlusIcon(): string;
+    libraryIcon(): string;
+    chatBubbleIcon(): string;
+    exclamationIcon(): string;
+    bellIcon(): string;
+    computerIcon(): string;
+    savingsPotIcon(): string;
+    calendarIcon(): string;
+    collectionIcon(): string;
+    userGroupIcon(): string;
+    folderIcon(): string;
+    pencilEditIcon(): string;
+    identificationIcon(): string;
+    usersIcon(): string;
+    trendingUpIcon(): string;
+    clockIcon(): string;
+    eyeIcon(): string;
+    inboxInIcon(): string;
+    lightBulbIcon(): string;
+    newsPaperIcon(): string;
+    addUserIcon(): string;
+    squarePlusIcon(): string;
+    circlePlusIcon(): string;
+    wrenchIcon(): string;
+    pencilIcon(): string;
+    reportDirectoryIcon(): string;
+    shareIcon(): string;
+    trashIcon(): string;
+    accountSettingsIcon(): string;
+    calculatorIcon(): string;
+    unitedIcon(): string;
+    complianceIcon(): string;
+    savingsIcon(): string;
+    auditTrailIcon(): string;
+    filledAddIcon(): string;
+    backIcon(): string;
+    schemeIcon(): string;
+    sharesIcon(): string;
+    cupCakeIcon(): string;
+    swimmingIcon(): string;
+    runningcon(): string;
+    meditationIcon(): string;
+    writeIcon(): string;
+    codeIcon(): string;
+    codeIcon2(): string;
+    movieIcon(): string;
+    movieIcon2(): string;
+    plantIcon(): string;
+    wheelbarrelIcon(): string;
+    whistleIcon(): string;
+    artPalleteIcon(): string;
+    shoppingTrollyIcon(): string;
+    danceIcon(): string;
+    bookIcon3(): string;
+    trainIcon(): string;
+    suitCaseIcon(): string;
+    strongArmIcon(): string;
+    fitnessIcon(): string;
+    dumbellIcon(): string;
+    cheffIcon(): string;
+    cookingIcon(): string;
+    cookingIcon2(): string;
+    planeIcon(): string;
+    transportation(): string;
+    gamingIcon(): string;
+    gamingIcon2(): string;
+    gamingIcon3(): string;
+    musicIcon(): string;
+    musicIcon2(): string;
+    musicIcon3(): string;
+    christianIcon(): string;
+    islamIcon(): string;
+    loveChatIcon(): string;
+    chatIcon(): string;
+    chatIcon2(): string;
+    heartBrokenIcon(): string;
+    ringsIcon(): string;
+    cupIcon(): string;
+    cupIcon2(): string;
+    cupIcon3(): string;
+    heartsIcon(): string;
+    heartsIcon2(): string;
+    heartsIcon3(): string;
+    inLoveIcon(): string;
+    tickIcon(): string;
+    addIcon2(): string;
+    uploadIcon2(): string;
+    downloadIcon2(): string;
+    pauseIcon(): string;
+    pauseIcon2(): string;
+    cameraIcon(): string;
+    cameraIcon2(): string;
+    heartIcon(): string;
+    viewIcon(): string;
+    hideIcon(): string;
+    lockIcon(): string;
+    lockIcon2(): string;
+    leftArrowIcon(): string;
+    leftArrowIcon(): string;
+
+    messagesIcon2(): string;
+    outgoingEmailIcon(): string;
+    incomingEmailIcon(): string;
+    unsentMailIcon(): string;
+    attachIcon(): string;
+    attachIcon2(): string;
+    telephoneIcon(): string;
+    telephoneIcon2(): string;
+    failedCallsIcon(): string;
+    contactIcon(): string;
+
+    csvIcon2(): string;
+    csvIcon3(): string;
+    dashboardIcon(): string;
+    dashboardIcon2(): string;
+    excelIcon2(): string;
+
+    homeIcon2(): string;
+    logoutIcon2(): string;
+    logoutIcon3(): string;
+    pdfIcon2(): string;
+    userIcon2(): string;
+    settingsIcon2(): string;
+    rightArrowIcon3(): string;
+    leftArrowIcon3(): string;
+    playIcon(): string;
+    playIcon2(): string;
+    privacyIcon(): string;
+    privacyIcon2(): string;
+    infoIcon(): string;
+    bulbIcon(): string;
+
+    checkMarkIcon(): string;
+    checkMarkIcon1(): string;
+    checkMarkIcon3(): string;
+
+    phoneLockIcon(): string;
+    phoneSMSicon(): string;
+    phoneSMSicon2(): string;
+
+    galleryIcon(): string;
+    galleryIcon2(): string;
+    galleryIcon3(): string;
+
+    historyIcon(): string;
+    replayIcon(): string;
+    forwardIcon(): string;
+    forwardIcon2(): string;
+    shareIcon2(): string;
+    shareIcon3(): string;
+    sendIcon(): string;
+    sendIcon2(): string;
+  };
+
+  //============================================================================
+  // app loader to render different views
+  //============================================================================
+  /**
+   * Configuration for a single view
+   */
+  export interface ViewConfig {
+    /** Path to the HTML file for the view (required) */
+    html: string;
+    /** Path to the CSS file for the view (optional) */
+    css?: string;
+    /** Path to the JavaScript module for the view (optional) */
+    js?: string;
+  }
+
+  /**
+   * Collection of view configurations keyed by view name
+   */
+  export interface ViewConfigs {
+    [viewName: string]: ViewConfig;
+  }
+
+  /**
+   * Structure of a view module that can be dynamically imported
+   */
+  export interface ViewModule {
+    /** Optional initialization function called when view loads */
+    init?: () => void;
+    /** Optional cleanup function called when view unloads */
+    cleanup?: () => void;
+    /** Any other exports from the module */
+    [key: string]: any;
+  }
+
+  /**
+   * AppLoader - A dynamic view loader for single-page applications
+   */
+  export class AppLoader {
+    /**
+     * Creates an instance of AppLoader
+     * @param viewConfigs - Configuration object for all views
+     */
+    constructor(viewConfigs: ViewConfigs);
+
+    /**
+     * Loads a view by its ID, including its HTML, CSS, and JavaScript
+     * @param viewId - The ID of the container element (should end with "-view")
+     * @returns Promise that resolves when the view is loaded
+     */
+    loadView(viewId: string): Promise<void>;
+
+    /**
+     * Loads a CSS file for a specific view
+     * @param viewName - Name of the view
+     * @param cssPath - Path to the CSS file
+     */
+    private loadCSS(viewName: string, cssPath: string): Promise<void>;
+
+    /**
+     * Dynamically imports a JavaScript module for a specific view
+     * @param viewName - Name of the view
+     * @param jsPath - Path to the JavaScript module
+     */
+    private loadJS(viewName: string, jsPath: string): Promise<void>;
+
+    /**
+     * Unloads a view and cleans up its resources
+     * @param viewName - Name of the view to unload
+     */
+    private unloadView(viewName: string): Promise<void>;
+  }
+
+  // =========================================================
+  // WebSocket (from websockets/index.js)
+  // =========================================================
+
+  interface WebSocketReconnectOptions {
+    maxAttempts?: number;
+    baseDelay?: number;
+    maxDelay?: number;
+    jitter?: boolean;
+  }
+
+  interface WebSocketHeartbeatOptions {
+    enabled?: boolean;
+    interval?: number;
+    timeout?: number;
+  }
+
+  interface WebSocketTransportOptions {
+    transports?: string[];
+    pollingInterval?: number;
+  }
+
+  interface WebSocketClientOptions {
+    autoConnect?: boolean;
+    timeout?: number;
+    reconnect?: boolean;
+    reconnectOptions?: WebSocketReconnectOptions;
+    heartbeat?: WebSocketHeartbeatOptions;
+    transport?: WebSocketTransportOptions;
+    debug?: boolean;
+  }
+
+  interface WebSocketStatus {
+    connected: boolean;
+    state: string;
+    url: string;
+    transport: string;
+    latency?: number;
+    uptime: number;
+    messagesSent: number;
+    messagesReceived: number;
+    reconnectAttempts: number;
+    networkOnline: boolean;
+    browser: string;
+  }
+
+  export class WebSocketClient {
+    constructor(url: string, options?: WebSocketClientOptions);
+
+    // Core methods
+    connect(): Promise<void>;
+    disconnect(code?: number, reason?: string): Promise<void>;
+    send(data: any): void;
+    sendWithAck(type: string, data: any, timeout?: number): Promise<any>;
+    reconnect(): Promise<void>;
+    destroy(): void;
+
+    // Event handling
+    on(event: string, handler: (data: any) => void): this;
+    off(event: string, handler?: (data: any) => void): this;
+    onMessage(type: string, handler: (data: any) => void): this;
+    offMessage(type: string, handler?: (data: any) => void): this;
+
+    // Status
+    isConnected(): boolean;
+    isHealthy(): boolean;
+    getStatus(): WebSocketStatus;
+    getTransportType(): string;
+  }
+
+  // Feature: Namespaces
+  export class Namespace {
+    constructor(path: string, socket: WebSocketClient, options?: any);
+    on(event: string, handler: Function): this;
+    emit(event: string, data: any, options?: any): void;
+    joinRoom(roomName: string, userId: string): Promise<boolean>;
+    leaveRoom(roomName: string, userId: string): void;
+  }
+
+  // Feature: Rooms
+  export class Room {
+    constructor(name: string, options?: any);
+    addMember(userId: string, data?: any): boolean;
+    removeMember(userId: string, reason?: string): boolean;
+    broadcast(event: string, data: any, except?: string[]): void;
+  }
+
+  // Utilities
+  export function isOnline(): boolean;
+  export function generateId(prefix?: string): string;
+
+  // =========================================================
+  // Intersection Observer Watcher (from observers/watcher.js)
+  // =========================================================
+
+  /**
+   * Options for watching an element's visibility
+   */
+  interface WatchElementOptions {
+    /** Called when element enters the viewport (or meets threshold) */
+    onEnter?: (element: Element, entry: IntersectionObserverEntry) => void;
+    /** Called when element exits the viewport */
+    onExit?: (element: Element, entry: IntersectionObserverEntry) => void;
+    /** Visibility ratio to trigger (0-1), or array of ratios */
+    threshold?: number | number[];
+    /** Margin around the root (CSS values, e.g. '100px' or '10% 20px') */
+    rootMargin?: string;
+    /** Scrolling container element (null = viewport) */
+    root?: Element | null;
+    /** If true, automatically stop watching after the first onEnter trigger */
+    triggerOnce?: boolean;
+  }
+
+  /**
+   * Statistics about active watchers
+   */
+  interface WatcherStats {
+    /** Total number of elements being watched */
+    elements: number;
+    /** Total number of registered callbacks */
+    callbacks: number;
+    /** Number of active observer pools */
+    pools: number;
+  }
+
+  /**
+   * Watch a single element for visibility changes
+   *
+   * @param target - DOM element or CSS selector
+   * @param options - Configuration with onEnter/onExit callbacks
+   * @returns Cleanup function to stop watching
+   */
+  export function watchElement(
+    target: Element | string,
+    options: WatchElementOptions,
+  ): () => void;
+
+  /**
+   * Watch multiple elements matching a CSS selector
+   *
+   * @param selector - CSS selector matching one or more elements
+   * @param options - Configuration with onEnter/onExit callbacks
+   * @returns Cleanup function to stop watching all matched elements
+   */
+  export function watchAll(
+    selector: string,
+    options: WatchElementOptions,
+  ): () => void;
+
+  /**
+   * Stop watching all elements across all pools
+   */
+  export function stopWatchingAll(): void;
+
+  /**
+   * Check if an element is currently being watched
+   *
+   * @param element - The DOM element to check
+   * @returns True if element has active watchers
+   */
+  export function isBeingWatched(element: Element): boolean;
+
+  /**
+   * Get statistics about active watchers
+   *
+   * @returns Object with element, callback, and pool counts
+   */
+  export function getWatcherStats(): WatcherStats;
+}