0xtrails 0.13.1 → 0.14.0

package/src/localeUtils.ts

@@ -1,244 +0,0 @@
-/**
- * Locale-aware number parsing utilities to handle different regional formats
- * Handles European format (1.234,56) vs US format (1,234.56)
- */
-
-import { isValidNumber } from "./utils/validation.js"
-
-/**
- * Detects if a string uses European number format
- * European: uses comma as decimal separator and period/space for thousands
- * Examples: "1.234,56" or "1 234,56"
- */
-function isEuropeanFormat(value: string): boolean {
-  // Remove all spaces first
-  const cleanValue = value.replace(/\s/g, "")
-
-  // Check if there's a comma that appears after any periods
-  const lastComma = cleanValue.lastIndexOf(",")
-  const lastPeriod = cleanValue.lastIndexOf(".")
-
-  // If there's a comma after the last period, it's likely European format
-  if (lastComma > lastPeriod && lastComma !== -1) {
-    const afterComma = cleanValue.slice(lastComma + 1)
-
-    // If comma has exactly 3 digits after it, it could be either:
-    // - US thousands separator (e.g., "1,234")
-    // - European decimal with 3 decimal places (e.g., "1,234" meaning 1.234)
-    // We need more context to decide
-    if (afterComma.length === 3 && /^\d+$/.test(afterComma)) {
-      // Check if there are periods before the comma (European thousands)
-      if (lastPeriod !== -1 && lastPeriod < lastComma) {
-        return true // European format like "1.234,567"
-      }
-      return false // US format like "1,234"
-    }
-
-    // If comma has any number of digits after it (not exactly 3),
-    // it's likely European decimal separator
-    if (afterComma.length > 0 && /^\d+$/.test(afterComma)) {
-      return true
-    }
-  }
-
-  // Special case: "1.234" could be either 1.234 (US decimal) or 1234 (European thousands)
-  // Only treat it as European thousands if:
-  // 1. There's exactly 3 digits after the period
-  // 2. There are at least 4 digits before the period (indicating a large number needing thousands separator)
-  if (lastPeriod !== -1 && lastComma === -1) {
-    const afterPeriod = cleanValue.slice(lastPeriod + 1)
-    const beforePeriod = cleanValue.slice(0, lastPeriod)
-
-    // Only consider it European thousands if it looks like a thousands-separated number
-    // e.g., "1234.567" (4+ digits before) vs "998.389" (3 digits before - likely a decimal)
-    if (afterPeriod.length === 3 && /^\d+$/.test(afterPeriod)) {
-      // If less than 4 digits before the period, it's more likely a decimal value
-      // like 998.389 (US decimal) rather than thousands separator
-      if (beforePeriod.length >= 4 && /^\d+$/.test(beforePeriod)) {
-        return true // It's likely European thousands separator
-      }
-      // With 3 or fewer digits before period, assume US decimal format
-      return false
-    }
-  }
-
-  return false
-}
-
-/**
- * Gets the user's locale from the browser
- * Falls back to 'en-US' if not available
- */
-export function getUserLocale(): string {
-  if (typeof navigator !== "undefined" && navigator.language) {
-    return navigator.language
-  }
-  return "en-US"
-}
-
-/**
- * Checks if the user's locale uses comma as decimal separator
- */
-export function isCommaDecimalLocale(): boolean {
-  const locale = getUserLocale()
-  // Common European locales that use comma as decimal separator
-  const commaLocales = [
-    "de",
-    "fr",
-    "es",
-    "it",
-    "pt",
-    "nl",
-    "pl",
-    "ru",
-    "tr",
-    "sv",
-    "da",
-    "no",
-    "fi",
-    "cs",
-    "hu",
-    "ro",
-    "bg",
-    "hr",
-    "sk",
-    "sl",
-  ]
-
-  // Check if locale starts with any of these language codes
-  return commaLocales.some((lang) => locale.toLowerCase().startsWith(lang))
-}
-
-/**
- * Parses a formatted number string to a standard US format number
- * Handles both European (1.234,56) and US (1,234.56) formats
- *
- * @param value - The formatted number string
- * @param forceLocale - Optional locale to force parsing (e.g., 'de-DE', 'en-US')
- * @returns The parsed number or NaN if parsing fails
- */
-export function parseLocaleNumber(
-  value: string | number | null | undefined,
-  forceLocale?: string,
-): number {
-  if (value === null || value === undefined || value === "") {
-    return 0
-  }
-
-  // If already a number, return it
-  if (typeof value === "number") {
-    return value
-  }
-
-  // Clean the string - remove currency symbols, spaces at start/end
-  let cleanValue = value.toString().trim()
-
-  // Remove common currency symbols
-  cleanValue = cleanValue.replace(/[$€£¥₹¢]/g, "")
-
-  // Remove any leading/trailing spaces again
-  cleanValue = cleanValue.trim()
-
-  // Handle negative numbers
-  const isNegative = cleanValue.startsWith("-") || cleanValue.startsWith("(")
-  cleanValue = cleanValue.replace(/[()-]/g, "")
-
-  // Determine format based on forceLocale or auto-detection
-  const useEuropeanFormat = forceLocale
-    ? isCommaDecimalLocale()
-    : isEuropeanFormat(cleanValue)
-
-  let normalizedValue: string
-
-  if (useEuropeanFormat) {
-    // European format: 1.234,56 or 1 234,56
-    // Remove thousand separators (periods and spaces)
-    normalizedValue = cleanValue.replace(/[\s.]/g, "")
-    // Replace comma with period for decimal
-    normalizedValue = normalizedValue.replace(",", ".")
-  } else {
-    // US format: 1,234.56
-    // Remove thousand separators (commas)
-    normalizedValue = cleanValue.replace(/,/g, "")
-    // Period is already decimal separator
-  }
-
-  // Parse the normalized value
-  const result = parseFloat(normalizedValue)
-
-  // Apply negative if needed
-  return isNegative ? -result : result
-}
-
-/**
- * Formats a number for display using the user's locale
- *
- * @param value - The number to format
- * @param options - Intl.NumberFormatOptions for formatting
- * @param locale - Optional locale to use (defaults to user's locale)
- */
-export function formatLocaleNumber(
-  value: number,
-  options?: Intl.NumberFormatOptions,
-  locale?: string,
-): string {
-  const userLocale = locale || getUserLocale()
-  return new Intl.NumberFormat(userLocale, options).format(value)
-}
-
-/**
- * Normalizes a number from any locale format to a standard number
- * This is a wrapper around parseLocaleNumber for backwards compatibility
- *
- * @param value - The value to normalize
- * @returns The normalized number
- */
-export function normalizeLocaleNumber(
-  value: string | number | null | undefined,
-): number {
-  return parseLocaleNumber(value)
-}
-
-/**
- * Checks if a value is a valid number in the user's locale
- *
- * @param value - The value to check
- * @returns true if the value can be parsed as a number
- */
-export function isValidLocaleNumber(value: string): boolean {
-  // Check for multiple decimal separators which would be invalid
-  const periods = (value.match(/\./g) || []).length
-  const commas = (value.match(/,/g) || []).length
-
-  // Multiple periods with multiple commas is definitely invalid
-  if (periods > 1 && commas > 1) {
-    return false
-  }
-
-  // If there are multiple periods not in thousands position, it's invalid
-  if (periods > 1) {
-    // Check if periods are used as thousands separators (should have 3 digits between them)
-    const parts = value.split(".")
-    for (let i = 1; i < parts.length - 1; i++) {
-      const part = parts[i]
-      if (part && part.replace(/[^0-9]/g, "").length !== 3) {
-        return false
-      }
-    }
-  }
-
-  // If there are multiple commas not in thousands position, it's invalid
-  if (commas > 1) {
-    // Check if commas are used as thousands separators
-    const parts = value.split(",")
-    for (let i = 1; i < parts.length - 1; i++) {
-      const part = parts[i]
-      if (part && part.replace(/[^0-9]/g, "").length !== 3) {
-        return false
-      }
-    }
-  }
-
-  const parsed = parseLocaleNumber(value)
-  return isValidNumber(parsed)
-}

package/src/logger/index.ts

@@ -1,95 +0,0 @@
-import { getQueryParam } from "../queryParams.js"
-import { getEnvVar } from "../config.js"
-
-// Logger is consumed by non-React modules, so debug state stays process-global.
-// TrailsProvider synchronizes this value at runtime.
-let _debugEnabled = false
-
-export function setDebugEnabled(enabled: boolean) {
-  if (_debugEnabled === enabled) {
-    return
-  }
-
-  _debugEnabled = enabled
-}
-
-function isDebugActive(): boolean {
-  return _debugEnabled || getQueryParam("debug") === "true"
-}
-
-const LOG_LEVELS = {
-  error: 0,
-  warn: 1,
-  info: 2,
-  log: 3,
-  debug: 4,
-  trace: 5,
-} as const
-
-type LogLevel = keyof typeof LOG_LEVELS
-
-export function getMinLogLevel(): number {
-  const testLogConsole = getEnvVar("TEST_LOG_CONSOLE")
-  if (testLogConsole && testLogConsole in LOG_LEVELS) {
-    return LOG_LEVELS[testLogConsole as LogLevel]
-  }
-  return getQueryParam("log") === "true" || isDebugActive()
-    ? LOG_LEVELS.trace
-    : -1
-}
-
-export const logger = {
-  get _enabled() {
-    return getQueryParam("log") === "true" || isDebugActive()
-  },
-  console: {
-    log: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.log) {
-        return
-      }
-      console.log(...args)
-    },
-    error: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.error) {
-        return
-      }
-      console.error(...args)
-    },
-    warn: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.warn) {
-        return
-      }
-      console.warn(...args)
-    },
-    info: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.info) {
-        return
-      }
-      console.info(...args)
-    },
-    debug: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.debug) {
-        return
-      }
-      console.debug(...args)
-    },
-    trace: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.trace) {
-        return
-      }
-      console.trace(...args)
-    },
-    time: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.log) {
-        return
-      }
-      console.time(...args)
-    },
-    timeEnd: (...args: any[]) => {
-      if (getMinLogLevel() < LOG_LEVELS.log) {
-        return
-      }
-      console.timeEnd(...args)
-    },
-  },
-}

package/src/logger/useSyncLoggerDebug.ts

@@ -1,11 +0,0 @@
-import { useRef } from "react"
-import { setDebugEnabled } from "./index.js"
-
-export function useSyncLoggerDebug(enabled: boolean) {
-  const previousEnabledRef = useRef<boolean | undefined>(undefined)
-
-  if (previousEnabledRef.current !== enabled) {
-    setDebugEnabled(enabled)
-    previousEnabledRef.current = enabled
-  }
-}

package/src/logger.ts

@@ -1 +0,0 @@
-export * from "./logger/index.js"

package/src/meld/components/MeldCountriesList.tsx

@@ -1,237 +0,0 @@
-import { Search } from "lucide-react"
-import type React from "react"
-import { useMemo, useState } from "react"
-import { useCountryCode, useCountryList } from "../../query/geo.hooks.js"
-import { getMeldSupportedCountries } from "../../widget/utils/countryUtils.js"
-import type { Country } from "../utils/meld.js"
-import { SimpleHeader } from "./SimpleHeader.js"
-
-// Convert country code (e.g., "US") to flag emoji
-const getCountryFlag = (countryCode: string): string => {
-  if (!countryCode || countryCode.length !== 2) {
-    return "🌍"
-  }
-  const codePoints = countryCode
-    .toUpperCase()
-    .split("")
-    .map((char) => 127397 + char.charCodeAt(0))
-  return String.fromCodePoint(...codePoints)
-}
-
-export interface MeldCountriesListProps {
-  onBack?: () => void
-  onSelectCountry?: (country: Country) => void
-  selectedCountry?: Country | null
-}
-
-export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
-  onBack,
-  onSelectCountry,
-  selectedCountry,
-}) => {
-  const {
-    data: apiCountries = [],
-    isLoading,
-    error,
-    refetch,
-  } = useCountryList()
-
-  const countries = useMemo(
-    () => getMeldSupportedCountries(apiCountries),
-    [apiCountries],
-  )
-
-  const [searchTerm, setSearchTerm] = useState("")
-
-  // Use proper geolocation hook
-  const { data: userCountryCode } = useCountryCode({ enabled: true })
-
-  // Filter and sort countries: user's country first, then alphabetically
-  const filteredCountries = useMemo(() => {
-    let filtered = countries
-
-    // Apply search filter
-    if (searchTerm.trim()) {
-      const lowerSearchTerm = searchTerm.toLowerCase().trim()
-      filtered = countries.filter(
-        (country) =>
-          country.name.toLowerCase().includes(lowerSearchTerm) ||
-          country.countryCode.toLowerCase().includes(lowerSearchTerm),
-      )
-    }
-
-    // Sort: user's country first, then alphabetically
-    return filtered.sort((a, b) => {
-      // If we have a detected user country, prioritize it
-      if (userCountryCode) {
-        if (
-          a.countryCode === userCountryCode &&
-          b.countryCode !== userCountryCode
-        ) {
-          return -1 // a (user's country) comes first
-        }
-        if (
-          b.countryCode === userCountryCode &&
-          a.countryCode !== userCountryCode
-        ) {
-          return 1 // b (user's country) comes first
-        }
-      }
-      // Otherwise, sort alphabetically by name
-      return a.name.localeCompare(b.name)
-    })
-  }, [countries, searchTerm, userCountryCode])
-
-  const handleCountrySelect = (country: Country) => {
-    if (onSelectCountry) {
-      onSelectCountry(country)
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <SimpleHeader onBack={onBack} title="Select Country" />
-
-      <div className="flex-1 overflow-y-auto">
-        {/* Search Input Field - Always visible */}
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="relative">
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <Search className="h-5 w-5 text-gray-500 dark:text-gray-500" />
-            </div>
-            <input
-              type="text"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              placeholder="Search countries..."
-              className="block w-full pl-10 pr-4 py-2 border border-solid border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-polygon-500 focus:border-polygon-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
-            />
-          </div>
-        </div>
-
-        {/* Loading indicator */}
-        {isLoading && (
-          <div className="flex items-center justify-center py-8 space-x-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-polygon-500"></div>
-            <div className="text-gray-600 dark:text-gray-400">
-              Loading countries...
-            </div>
-          </div>
-        )}
-
-        {/* Error message */}
-        {error && (
-          <div className="flex items-center justify-center py-8 px-4">
-            <div className="text-center p-4 border border-solid border-red-200 dark:border-red-700 rounded-lg bg-red-50 dark:bg-red-900/20 max-w-md">
-              <div className="text-red-600 dark:text-red-400 font-medium mb-2">
-                Error loading countries
-              </div>
-              <div className="text-sm text-red-500 dark:text-red-300">
-                {error.message ||
-                  "Failed to load country list. Please check your internet connection and try again."}
-              </div>
-              {error.message?.includes("Network") && (
-                <div className="text-xs text-red-400 dark:text-red-400 mt-1">
-                  Check that the trails-api server is running and accessible.
-                </div>
-              )}
-              <button
-                type="button"
-                onClick={() => refetch()}
-                className="mt-3 px-4 py-2 text-sm bg-red-100 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700 text-red-700 dark:text-red-200 rounded-md transition-colors"
-              >
-                Retry
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Country List */}
-        {!isLoading && !error && (
-          <div className="space-y-2 p-4 max-h-[400px] overflow-y-auto">
-            {filteredCountries.length === 0 && searchTerm.trim() ? (
-              <div className="flex items-center justify-center py-8">
-                <div className="text-gray-600 dark:text-gray-400">
-                  No countries found matching "{searchTerm}"
-                </div>
-              </div>
-            ) : (
-              filteredCountries.map((country) => {
-                const isSelected =
-                  selectedCountry?.countryCode === country.countryCode
-                const isUserCountry = userCountryCode === country.countryCode
-
-                return (
-                  <button
-                    key={country.countryCode}
-                    type="button"
-                    onClick={() => handleCountrySelect(country)}
-                    className={`w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 ${
-                      isSelected
-                        ? "bg-polygon-50 dark:bg-polygon-900/20 border-2 border-polygon-500 dark:border-polygon-400"
-                        : "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent"
-                    } text-gray-900 dark:text-white`}
-                  >
-                    <div className="flex items-center space-x-3 flex-1">
-                      <div className="w-10 h-10 rounded-lg flex items-center justify-center text-2xl">
-                        {getCountryFlag(country.countryCode)}
-                      </div>
-                      <div className="flex-1 text-left">
-                        <div className="flex items-center gap-2">
-                          <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                            {country.name}
-                          </h4>
-                          {isUserCountry && (
-                            <span className="text-xs px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">
-                              Your Location
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    {isSelected && (
-                      <div className="text-polygon-500 dark:text-polygon-400">
-                        <svg
-                          className="w-5 h-5"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                          aria-label="Selected"
-                        >
-                          <title>Selected</title>
-                          <path
-                            fillRule="evenodd"
-                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                    )}
-                    {!isSelected && (
-                      <div className="text-gray-400">
-                        <svg
-                          className="w-5 h-5"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          aria-label="Chevron right"
-                        >
-                          <title>Chevron right</title>
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M9 5l7 7-7 7"
-                          />
-                        </svg>
-                      </div>
-                    )}
-                  </button>
-                )
-              })
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}