@pro6pp/infer-react 0.0.2-beta.8 → 0.1.0-beta.19

package/dist/index.js

@@ -3,17 +3,120 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.tsx
-import React, { useState, useMemo, useEffect, useRef } from "react";
+import React, {
+  useState,
+  useMemo,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+
+// ../core/src/label-formatter.ts
+function normalize(str) {
+  return str.toLowerCase().trim();
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function findWordPosition(query, value) {
+  const normalizedQuery = normalize(query);
+  const normalizedValue = normalize(value);
+  if (normalizedValue.includes(" ")) {
+    return normalizedQuery.indexOf(normalizedValue);
+  }
+  const pattern = new RegExp(`(?:^|[,\\s])${escapeRegex(normalizedValue)}(?:$|[,\\s])`, "g");
+  const match = pattern.exec(normalizedQuery);
+  if (match) {
+    const matchStart = match.index;
+    const firstChar = normalizedQuery[matchStart];
+    if (firstChar === "," || firstChar === " ") {
+      return matchStart + 1;
+    }
+    return matchStart;
+  }
+  return -1;
+}
+function detectComponentOrder(query, value) {
+  const detected = [];
+  const componentMap = [];
+  if (value.street) {
+    componentMap.push({ value: value.street, type: "street" });
+  }
+  if (value.city) {
+    componentMap.push({ value: value.city, type: "city" });
+  }
+  if (value.postcode) {
+    componentMap.push({ value: value.postcode, type: "postcode" });
+  }
+  if (value.street_number !== void 0 && value.street_number !== null) {
+    componentMap.push({ value: String(value.street_number), type: "street_number" });
+  }
+  if (value.addition) {
+    componentMap.push({ value: value.addition, type: "addition" });
+  }
+  for (const comp of componentMap) {
+    const position = findWordPosition(query, comp.value);
+    if (position !== -1) {
+      detected.push({
+        type: comp.type,
+        value: comp.value,
+        position
+      });
+    }
+  }
+  detected.sort((a, b) => a.position - b.position);
+  return detected;
+}
+function formatLabelByInputOrder(query, value) {
+  if (!value || !query) {
+    return "";
+  }
+  const detectedOrder = detectComponentOrder(query, value);
+  const detectedTypes = new Set(detectedOrder.map((d) => d.type));
+  const parts = [];
+  for (const detected of detectedOrder) {
+    parts.push(detected.value);
+  }
+  const defaultOrder = ["street", "street_number", "addition", "postcode", "city"];
+  for (const type of defaultOrder) {
+    if (detectedTypes.has(type)) continue;
+    let val;
+    switch (type) {
+      case "street":
+        val = value.street;
+        break;
+      case "city":
+        val = value.city;
+        break;
+      case "street_number":
+        val = value.street_number !== void 0 ? String(value.street_number) : void 0;
+        break;
+      case "postcode":
+        val = value.postcode;
+        break;
+      case "addition":
+        val = value.addition;
+        break;
+    }
+    if (val) {
+      parts.push(val);
+    }
+  }
+  return parts.join(", ");
+}
 
 // ../core/src/core.ts
 var DEFAULTS = {
   API_URL: "https://api.pro6pp.nl/v2",
-  LIMIT: 1e3,
+  LIMIT: 20,
   DEBOUNCE_MS: 150,
-  MIN_DEBOUNCE_MS: 50
+  MIN_DEBOUNCE_MS: 50,
+  MAX_RETRIES: 0
 };
 var PATTERNS = {
-  DIGITS_1_3: /^[0-9]{1,3}$/
+  DIGITS_1_3: /^[0-9]{1,3}$/,
+  STREET_NUMBER_PREFIX: /^(\d+)\s*,\s*$/
 };
 var INITIAL_STATE = {
   query: "",
@@ -22,8 +125,10 @@ var INITIAL_STATE = {
   streets: [],
   suggestions: [],
   isValid: false,
+  value: null,
   isError: false,
   isLoading: false,
+  hasMore: false,
   selectedSuggestionIndex: -1
 };
 var InferCore = class {
@@ -34,8 +139,11 @@ var InferCore = class {
   constructor(config) {
     __publicField(this, "country");
     __publicField(this, "authKey");
-    __publicField(this, "apiUrl");
-    __publicField(this, "limit");
+    __publicField(this, "explicitApiUrl");
+    __publicField(this, "baseLimit");
+    __publicField(this, "currentLimit");
+    __publicField(this, "maxRetries");
+    __publicField(this, "language");
     __publicField(this, "fetcher");
     __publicField(this, "onStateChange");
     __publicField(this, "onSelect");
@@ -46,11 +154,14 @@ var InferCore = class {
     __publicField(this, "state");
     __publicField(this, "abortController", null);
     __publicField(this, "debouncedFetch");
-    __publicField(this, "isSelecting", false);
     this.country = config.country;
     this.authKey = config.authKey;
-    this.apiUrl = config.apiUrl || DEFAULTS.API_URL;
-    this.limit = config.limit || DEFAULTS.LIMIT;
+    this.explicitApiUrl = config.apiUrl;
+    this.baseLimit = config.limit || DEFAULTS.LIMIT;
+    this.currentLimit = this.baseLimit;
+    this.language = config.language;
+    const configRetries = config.maxRetries !== void 0 ? config.maxRetries : DEFAULTS.MAX_RETRIES;
+    this.maxRetries = Math.max(0, Math.min(configRetries, 10));
     this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
     this.onStateChange = config.onStateChange || (() => {
     });
@@ -67,28 +178,37 @@ var InferCore = class {
    * @param value The raw string from the input field.
    */
   handleInput(value) {
-    if (this.isSelecting) {
-      this.isSelecting = false;
-      return;
-    }
+    this.currentLimit = this.baseLimit;
     const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
     this.updateState({
       query: value,
       isValid: false,
+      value: null,
       isLoading: !!value.trim(),
-      selectedSuggestionIndex: -1
+      selectedSuggestionIndex: -1,
+      hasMore: false,
+      stage: isEditingFinal ? null : this.state.stage
     });
     if (isEditingFinal) {
       this.onSelect(null);
     }
     this.debouncedFetch(value);
   }
+  /**
+   * Increases the current limit and re-fetches the query to show more results.
+   */
+  loadMore() {
+    if (this.state.isLoading) return;
+    this.currentLimit += this.baseLimit;
+    this.updateState({ isLoading: true });
+    this.executeFetch(this.state.query);
+  }
   /**
    * Handles keyboard events for the input field.
    * Supports:
    * - `ArrowUp`/`ArrowDown`: Navigate through the suggestion list.
    * - `Enter`: Select the currently highlighted suggestion.
-   * - `Space`: Automatically inserts a comma if a numeric house number is detected.
+   * - `Space`: Automatically inserts a comma if a numeric street number is detected.
    * @param event The keyboard event from the input element.
    */
   handleKeyDown(event) {
@@ -136,6 +256,7 @@ var InferCore = class {
    * Manually selects a suggestion or a string value.
    * This is typically called when a user clicks a suggestion in the UI.
    * @param item The suggestion object or string to select.
+   * @returns boolean True if the selection is a final address.
    */
   selectItem(item) {
     this.debouncedFetch.cancel();
@@ -149,26 +270,27 @@ var InferCore = class {
     }
     const valueObj = typeof item !== "string" && typeof item.value === "object" ? item.value : void 0;
     const isFullResult = !!valueObj && Object.keys(valueObj).length > 0;
-    this.isSelecting = true;
     if (this.state.stage === "final" || isFullResult) {
       let finalQuery = label;
       if (valueObj && Object.keys(valueObj).length > 0) {
-        const { street, street_number, house_number, city } = valueObj;
-        const number = street_number || house_number;
-        if (street && number && city) {
-          finalQuery = `${street} ${number}, ${city}`;
+        const { street, street_number, postcode, city, addition } = valueObj;
+        if (street && street_number && city) {
+          const suffix = addition ? ` ${addition}` : "";
+          const postcodeStr = postcode ? `${postcode}, ` : "";
+          finalQuery = `${street}, ${street_number}${suffix}, ${postcodeStr}${city}`;
         }
       }
       this.finishSelection(finalQuery, valueObj);
-      return;
+      return true;
     }
     const subtitle = typeof item !== "string" ? item.subtitle : null;
     this.processSelection(logicValue, subtitle);
+    return false;
   }
   shouldAutoInsertComma(currentVal) {
     const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
     if (isStartOfSegmentAndNumeric) return true;
-    if (this.state.stage === "house_number") {
+    if (this.state.stage === "street_number") {
       const currentFragment = this.getCurrentFragment(currentVal);
       return PATTERNS.DIGITS_1_3.test(currentFragment);
     }
@@ -181,12 +303,11 @@ var InferCore = class {
       cities: [],
       streets: [],
       isValid: true,
-      stage: "final"
+      value: value || null,
+      stage: "final",
+      hasMore: false
     });
     this.onSelect(value || label);
-    setTimeout(() => {
-      this.isSelecting = false;
-    }, 0);
   }
   processSelection(text, subtitle) {
     const { stage, query } = this.state;
@@ -197,7 +318,22 @@ var InferCore = class {
         nextQuery = `${subtitle}, ${text}, `;
       } else {
         const prefix = this.getQueryPrefix(query);
-        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        const shouldAddSubtitle = !prefix || !prefix.includes(subtitle);
+        let effectivePrefix = prefix;
+        if (prefix && subtitle) {
+          const prefixNumMatch = prefix.match(PATTERNS.STREET_NUMBER_PREFIX);
+          if (prefixNumMatch) {
+            const num = prefixNumMatch[1];
+            if (subtitle.startsWith(num)) {
+              effectivePrefix = "";
+            }
+          }
+        }
+        if (shouldAddSubtitle) {
+          nextQuery = effectivePrefix ? `${effectivePrefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        } else {
+          nextQuery = effectivePrefix ? `${effectivePrefix} ${text}, ` : `${text}, `;
+        }
       }
       this.updateQueryAndFetch(nextQuery);
       return;
@@ -207,50 +343,78 @@ var InferCore = class {
       return;
     }
     const hasComma = query.includes(",");
-    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "street_number_first");
     if (isFirstSegment) {
       nextQuery = `${text}, `;
     } else {
       nextQuery = this.replaceLastSegment(query, text);
-      if (stage !== "house_number") {
+      if (stage !== "street_number") {
         nextQuery += ", ";
       }
     }
     this.updateQueryAndFetch(nextQuery);
   }
-  executeFetch(val) {
+  executeFetch(val, attempt = 0) {
     const text = (val || "").toString();
     if (!text.trim()) {
       this.abortController?.abort();
       this.resetState();
       return;
     }
-    this.updateState({ isError: false });
-    if (this.abortController) this.abortController.abort();
-    this.abortController = new AbortController();
-    const url = new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`);
-    const params = {
-      authKey: this.authKey,
+    if (attempt === 0) {
+      this.updateState({ isError: false });
+      if (this.abortController) this.abortController.abort();
+      this.abortController = new AbortController();
+    }
+    const currentSignal = this.abortController?.signal;
+    const baseUrl = this.explicitApiUrl ? this.explicitApiUrl : `${DEFAULTS.API_URL}/infer/${this.country.toLowerCase()}`;
+    const params = new URLSearchParams({
       query: text,
-      limit: this.limit.toString()
-    };
-    url.search = new URLSearchParams(params).toString();
-    this.fetcher(url.toString(), { signal: this.abortController.signal }).then((res) => {
-      if (!res.ok) throw new Error("Network error");
+      limit: this.currentLimit.toString()
+    });
+    if (this.explicitApiUrl) {
+      params.append("country", this.country.toLowerCase());
+    }
+    if (this.authKey) {
+      params.set("authKey", this.authKey);
+    }
+    if (this.language) {
+      params.set("language", this.language);
+    }
+    const separator = baseUrl.includes("?") ? "&" : "?";
+    const finalUrl = `${baseUrl}${separator}${params.toString()}`;
+    this.fetcher(finalUrl, { signal: currentSignal }).then((res) => {
+      if (!res.ok) {
+        if (attempt < this.maxRetries && (res.status >= 500 || res.status === 429)) {
+          return this.retry(val, attempt, currentSignal);
+        }
+        throw new Error("Network error");
+      }
       return res.json();
-    }).then((data) => this.mapResponseToState(data)).catch((e) => {
-      if (e.name !== "AbortError") {
-        this.updateState({ isError: true, isLoading: false });
+    }).then((data) => {
+      if (data) this.mapResponseToState(data);
+    }).catch((e) => {
+      if (e.name === "AbortError") return;
+      if (attempt < this.maxRetries) {
+        return this.retry(val, attempt, currentSignal);
       }
+      this.updateState({ isError: true, isLoading: false });
     });
   }
+  retry(val, attempt, signal) {
+    if (signal?.aborted) return;
+    const delay = Math.pow(2, attempt) * 200;
+    setTimeout(() => {
+      if (!signal?.aborted) {
+        this.executeFetch(val, attempt + 1);
+      }
+    }, delay);
+  }
   mapResponseToState(data) {
     const newState = {
       stage: data.stage,
       isLoading: false
     };
-    let autoSelect = false;
-    let autoSelectItem = null;
     const rawSuggestions = data.suggestions || [];
     const uniqueSuggestions = [];
     const seen = /* @__PURE__ */ new Set();
@@ -258,43 +422,62 @@ var InferCore = class {
       const key = `${item.label}|${item.subtitle || ""}|${JSON.stringify(item.value || {})}`;
       if (!seen.has(key)) {
         seen.add(key);
-        uniqueSuggestions.push(item);
+        const reformattedItem = this.reformatSuggestionLabel(item);
+        uniqueSuggestions.push(reformattedItem);
       }
     }
+    const totalCount = uniqueSuggestions.length + (data.cities?.length || 0) + (data.streets?.length || 0);
+    newState.hasMore = totalCount >= this.currentLimit;
     if (data.stage === "mixed") {
       newState.cities = data.cities || [];
       newState.streets = data.streets || [];
-      newState.suggestions = [];
+      if (newState.cities?.length === 0 && newState.streets?.length === 0) {
+        newState.suggestions = uniqueSuggestions;
+      } else {
+        newState.suggestions = [];
+      }
     } else {
       newState.suggestions = uniqueSuggestions;
       newState.cities = [];
       newState.streets = [];
-      if (data.stage === "final" && uniqueSuggestions.length === 1) {
-        autoSelect = true;
-        autoSelectItem = uniqueSuggestions[0];
-      }
     }
     newState.isValid = data.stage === "final";
-    if (autoSelect && autoSelectItem) {
-      newState.query = autoSelectItem.label;
-      newState.suggestions = [];
-      newState.cities = [];
-      newState.streets = [];
-      newState.isValid = true;
-      this.updateState(newState);
-      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
-      this.onSelect(val);
-    } else {
-      this.updateState(newState);
+    this.updateState(newState);
+    if (newState.isValid && uniqueSuggestions.length === 1) {
+      this.selectItem(uniqueSuggestions[0]);
     }
   }
+  /**
+   * Reformats a suggestion's label based on the user's input order.
+   * If the suggestion has a structured value object, we reorder the label
+   * to match how the user typed the components.
+   */
+  reformatSuggestionLabel(item) {
+    if (!item.value || typeof item.value === "string") {
+      return item;
+    }
+    const addressValue = item.value;
+    if (!addressValue.street || !addressValue.city) {
+      return item;
+    }
+    const reformattedLabel = formatLabelByInputOrder(this.state.query, addressValue);
+    if (reformattedLabel) {
+      return { ...item, label: reformattedLabel };
+    }
+    return item;
+  }
   updateQueryAndFetch(nextQuery) {
-    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
-    this.updateState({ isLoading: true, isValid: false });
+    this.updateState({
+      query: nextQuery,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: false,
+      value: null,
+      isLoading: true,
+      hasMore: false
+    });
     this.debouncedFetch(nextQuery);
-    setTimeout(() => {
-      this.isSelecting = false;
-    }, 0);
   }
   replaceLastSegment(fullText, newSegment) {
     const lastCommaIndex = fullText.lastIndexOf(",");
@@ -331,6 +514,49 @@ var InferCore = class {
   }
 };
 
+// ../core/src/highlight.ts
+function mergeSegments(segments) {
+  if (segments.length === 0) return segments;
+  const merged = [];
+  for (const seg of segments) {
+    const last = merged[merged.length - 1];
+    if (last && last.match === seg.match) {
+      last.text += seg.text;
+    } else {
+      merged.push({ text: seg.text, match: seg.match });
+    }
+  }
+  return merged;
+}
+function getHighlightSegments(text, query) {
+  if (!query || !text) return [{ text, match: false }];
+  const segments = [];
+  const normalizedText = text.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  let queryCursor = 0;
+  let unmatchedCursor = 0;
+  for (let textCursor = 0; textCursor < text.length; textCursor++) {
+    const isMatch = queryCursor < query.length && normalizedText[textCursor] === normalizedQuery[queryCursor];
+    if (!isMatch) continue;
+    const hasPrecedingUnmatched = textCursor > unmatchedCursor;
+    if (hasPrecedingUnmatched) {
+      segments.push({ text: text.slice(unmatchedCursor, textCursor), match: false });
+    }
+    segments.push({ text: text[textCursor], match: true });
+    queryCursor++;
+    unmatchedCursor = textCursor + 1;
+  }
+  const hasRemainingText = unmatchedCursor < text.length;
+  if (hasRemainingText) {
+    segments.push({ text: text.slice(unmatchedCursor), match: false });
+  }
+  const isFullMatch = queryCursor === query.length;
+  if (!isFullMatch) {
+    return [{ text, match: false }];
+  }
+  return mergeSegments(segments);
+}
+
 // ../core/src/default-styles.ts
 var DEFAULT_STYLES = `
   .pro6pp-wrapper {
@@ -338,116 +564,276 @@ var DEFAULT_STYLES = `
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     width: 100%;
+    -webkit-tap-highlight-color: transparent;
   }
   .pro6pp-wrapper * {
     box-sizing: border-box;
   }
   .pro6pp-input {
     width: 100%;
-    padding: 10px 12px;
+    padding: 12px 14px;
+    padding-right: 48px;
     border: 1px solid #e0e0e0;
-    border-radius: 4px;
+    border-radius: 8px;
     font-size: 16px;
     line-height: 1.5;
+    appearance: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
+
+  .pro6pp-input::placeholder {
+    font-size: 16px;
+    color: #a3a3a3;
+  }
+
   .pro6pp-input:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
+
+  .pro6pp-input-addons {
+    position: absolute;
+    right: 4px;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+  .pro6pp-input-addons > * {
+    pointer-events: auto;
+  }
+
+  .pro6pp-clear-button {
+    background: none;
+    border: none;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    color: #a3a3a3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: color 0.2s, background-color 0.2s;
+    touch-action: manipulation;
+  }
+
+  @media (hover: hover) {
+    .pro6pp-clear-button:hover {
+      color: #1f2937;
+      background-color: #f3f4f6;
+    }
+  }
+
+  .pro6pp-clear-button:active {
+    background-color: #f3f4f6;
+  }
+
   .pro6pp-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 9999;
     margin-top: 4px;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    max-height: 300px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 9999;
+    padding: 0;
+    max-height: 280px;
     overflow-y: auto;
-    list-style: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-height: 500px) {
+    .pro6pp-dropdown {
+      max-height: 180px;
+    }
   }
+
+  .pro6pp-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
   .pro6pp-item {
-    padding: 10px 16px;
+    padding: 12px 14px;
     cursor: pointer;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    color: #000000;
-    font-size: 14px;
-    line-height: 1.2;
-    white-space: nowrap;
-    overflow: hidden;
+    font-size: 15px;
+    line-height: 1.4;
+    color: #374151;
+    border-bottom: 1px solid #f3f4f6;
+    transition: background-color 0.1s;
+    flex-shrink: 0;
   }
-  .pro6pp-item:hover, .pro6pp-item--active {
-    background-color: #f5f5f5;
+
+  .pro6pp-item:last-child {
+    border-bottom: none;
   }
-  .pro6pp-item__label {
-    font-weight: 500;
-    flex-shrink: 0;
+
+  @media (hover: hover) {
+    .pro6pp-item:hover, .pro6pp-item--active {
+      background-color: #f9fafb;
+    }
   }
-  .pro6pp-item__subtitle {
-    font-size: 14px;
-    color: #404040;
+
+  .pro6pp-item:active {
+    background-color: #f3f4f6;
+  }
+
+  .pro6pp-item__label {
+    font-weight: 400;
+    flex-shrink: 1;
     overflow: hidden;
     text-overflow: ellipsis;
-    flex-shrink: 1;
+    white-space: nowrap;
+  }
+
+  .pro6pp-item__label--match {
+    font-weight: 520;
+  }
+
+  .pro6pp-item__label--unmatched {
+    font-weight: 400;
+    color: #4b5563;
+  }
+
+  .pro6pp-item__subtitle {
+    color: #6b7280;
+    flex-shrink: 0;
   }
+
   .pro6pp-item__chevron {
-    margin-left: auto;
+    color: #d1d5db;
     display: flex;
     align-items: center;
-    color: #a3a3a3;
+    margin-left: auto;
     padding-left: 8px;
   }
+
   .pro6pp-no-results {
-    padding: 12px;
-    color: #555555;
-    font-size: 14px;
+    padding: 24px 16px;
+    color: #6b7280;
+    font-size: 15px;
     text-align: center;
-    user-select: none;
-    pointer-events: none;
   }
-  .pro6pp-loader {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 16px;
-    height: 16px;
-    border: 2px solid #e0e0e0;
-    border-top-color: #404040;
+
+  .pro6pp-loader-item {
+    padding: 10px 12px;
+    color: #6b7280;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: #f9fafb;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .pro6pp-mini-spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid #e5e7eb;
+    border-top-color: #6b7280;
     border-radius: 50%;
     animation: pro6pp-spin 0.6s linear infinite;
-    pointer-events: none;
   }
+
+  @media (max-width: 640px) {
+    .pro6pp-input {
+      font-size: 16px;
+      padding: 10px 12px;
+    }
+    .pro6pp-item {
+      padding: 10px 12px;
+      font-size: 14px;
+    }
+  }
+
   @keyframes pro6pp-spin {
-    to { transform: translateY(-50%) rotate(360deg); }
+    to { transform: rotate(360deg); }
   }
 `;
 
 // src/index.tsx
+var HighlightedText = ({ text, query }) => {
+  const segments = useMemo(() => getHighlightSegments(text, query), [text, query]);
+  return /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__label" }, segments.map(
+    (seg, i) => seg.match ? /* @__PURE__ */ React.createElement("span", { key: i, className: "pro6pp-item__label--match" }, seg.text) : /* @__PURE__ */ React.createElement("span", { key: i, className: "pro6pp-item__label--unmatched" }, seg.text)
+  ));
+};
 function useInfer(config) {
-  const [state, setState] = useState(INITIAL_STATE);
+  const [state, setState] = useState(() => {
+    if (config.initialValue) {
+      const suffix = config.initialValue.addition ? ` ${config.initialValue.addition}` : "";
+      const postcodeStr = config.initialValue.postcode ? `${config.initialValue.postcode}, ` : "";
+      return {
+        ...INITIAL_STATE,
+        value: config.initialValue,
+        query: `${config.initialValue.street}, ${config.initialValue.street_number}${suffix}, ${postcodeStr}${config.initialValue.city}`,
+        isValid: true,
+        stage: "final"
+      };
+    }
+    return INITIAL_STATE;
+  });
+  const callbacksRef = useRef({
+    onStateChange: config.onStateChange,
+    onSelect: config.onSelect
+  });
+  useEffect(() => {
+    callbacksRef.current = {
+      onStateChange: config.onStateChange,
+      onSelect: config.onSelect
+    };
+  }, [config.onStateChange, config.onSelect]);
   const core = useMemo(() => {
-    return new InferCore({
+    const instance = new InferCore({
       ...config,
       onStateChange: (newState) => {
         setState({ ...newState });
-        if (config.onStateChange) {
-          config.onStateChange(newState);
-        }
+        callbacksRef.current.onStateChange?.(newState);
+      },
+      onSelect: (selection) => {
+        callbacksRef.current.onSelect?.(selection);
       }
     });
-  }, [config.country, config.authKey, config.limit, config.debounceMs]);
+    if (config.initialValue) {
+      const address = config.initialValue;
+      const suffix = address.addition ? ` ${address.addition}` : "";
+      const postcodeStr = address.postcode ? `${address.postcode}, ` : "";
+      const label = `${address.street}, ${address.street_number}${suffix}, ${postcodeStr}${address.city}`;
+      instance.selectItem({ label, value: address });
+    }
+    return instance;
+  }, [
+    config.country,
+    config.authKey,
+    config.apiUrl,
+    config.fetcher,
+    config.limit,
+    config.debounceMs,
+    config.maxRetries,
+    config.initialValue,
+    config.language
+  ]);
+  const setValue = (address) => {
+    if (!address) return;
+    const suffix = address.addition ? ` ${address.addition}` : "";
+    const postcodeStr = address.postcode ? `${address.postcode}, ` : "";
+    const label = `${address.street}, ${address.street_number}${suffix}, ${postcodeStr}${address.city}`;
+    core.selectItem({ label, value: address });
+  };
   return {
-    /** The current UI state (suggestions, loading status, query, etc.). */
+    /** The current UI state (suggestions, loading status, query, value, etc.). */
     state,
     /** The raw InferCore instance for manual control. */
     core,
@@ -457,95 +843,125 @@ function useInfer(config) {
       onChange: (e) => core.handleInput(e.target.value),
       onKeyDown: (e) => core.handleKeyDown(e)
     },
-    /** Function to manually select a specific suggestion. */
-    selectItem: (item) => core.selectItem(item)
+    /** Manually select a specific suggestion. */
+    selectItem: (item) => core.selectItem(item),
+    /** Programmatically set the address value. */
+    setValue,
+    /** Load more results. */
+    loadMore: () => core.loadMore()
   };
 }
-var Pro6PPInfer = ({
-  className,
-  style,
-  inputProps,
-  placeholder = "Start typing an address...",
-  renderItem,
-  disableDefaultStyles = false,
-  noResultsText = "No results found",
-  renderNoResults,
-  ...config
-}) => {
-  const { state, selectItem, inputProps: coreInputProps } = useInfer(config);
-  const [isOpen, setIsOpen] = useState(false);
-  const inputRef = useRef(null);
-  const wrapperRef = useRef(null);
-  useEffect(() => {
-    if (disableDefaultStyles) return;
-    const styleId = "pro6pp-styles";
-    if (!document.getElementById(styleId)) {
-      const styleEl = document.createElement("style");
-      styleEl.id = styleId;
-      styleEl.textContent = DEFAULT_STYLES;
-      document.head.appendChild(styleEl);
-    }
-  }, [disableDefaultStyles]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+var Pro6PPInfer = forwardRef(
+  ({
+    className,
+    style,
+    inputProps,
+    placeholder = "Start typing an address...",
+    renderItem,
+    disableDefaultStyles = false,
+    noResultsText = "No results found",
+    loadingText = "Loading more...",
+    renderNoResults,
+    showClearButton = true,
+    ...config
+  }, ref) => {
+    const { state, selectItem, loadMore, inputProps: coreInputProps, core } = useInfer(config);
+    const [isOpen, setIsOpen] = useState(false);
+    const internalInputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const observerTarget = useRef(null);
+    useImperativeHandle(ref, () => internalInputRef.current);
+    useEffect(() => {
+      if (disableDefaultStyles) return;
+      const styleId = "pro6pp-styles";
+      if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement("style");
+        styleEl.id = styleId;
+        styleEl.textContent = DEFAULT_STYLES;
+        document.head.appendChild(styleEl);
+      }
+    }, [disableDefaultStyles]);
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    useEffect(() => {
+      const currentTarget = observerTarget.current;
+      if (!currentTarget) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && state.hasMore && !state.isLoading) {
+            loadMore();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observer.observe(currentTarget);
+      return () => {
+        if (currentTarget) observer.unobserve(currentTarget);
+      };
+    }, [state.hasMore, state.isLoading, loadMore, isOpen]);
+    const items = useMemo(() => {
+      return [
+        ...state.cities.map((c) => ({ ...c, type: "city" })),
+        ...state.streets.map((s) => ({ ...s, type: "street" })),
+        ...state.suggestions.map((s) => ({ ...s, type: "suggestion" }))
+      ];
+    }, [state.cities, state.streets, state.suggestions]);
+    const handleSelect = (item) => {
+      const isFinal = selectItem(item);
+      if (!isFinal) {
+        setTimeout(() => internalInputRef.current?.focus(), 0);
+      } else {
         setIsOpen(false);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const items = useMemo(() => {
-    return [
-      ...state.cities.map((c) => ({ ...c, type: "city" })),
-      ...state.streets.map((s) => ({ ...s, type: "street" })),
-      ...state.suggestions.map((s) => ({ ...s, type: "suggestion" }))
-    ];
-  }, [state.cities, state.streets, state.suggestions]);
-  const handleSelect = (item) => {
-    selectItem(item);
-    setIsOpen(false);
-    if (!state.isValid && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-  const hasResults = items.length > 0;
-  const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
-  const showDropdown = isOpen && (hasResults || showNoResults);
-  return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: inputRef,
-      type: "text",
-      className: "pro6pp-input",
-      placeholder,
-      autoComplete: "off",
-      ...inputProps,
-      ...coreInputProps,
-      onFocus: (e) => {
-        setIsOpen(true);
-        inputProps?.onFocus?.(e);
+    const handleClear = () => {
+      core.handleInput("");
+      internalInputRef.current?.focus();
+    };
+    const hasResults = items.length > 0;
+    const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
+    const showDropdown = isOpen && (hasResults || state.isLoading || showNoResults);
+    const isInfiniteLoading = state.isLoading && items.length > 0;
+    return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: internalInputRef,
+        type: "text",
+        className: "pro6pp-input",
+        placeholder,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "none",
+        spellCheck: "false",
+        inputMode: "search",
+        enterKeyHint: "search",
+        ...inputProps,
+        ...coreInputProps,
+        onFocus: (e) => {
+          setIsOpen(true);
+          inputProps?.onFocus?.(e);
+        }
       }
-    }
-  ), state.isLoading && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-loader" })), showDropdown && /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-dropdown", role: "listbox" }, hasResults ? items.map((item, index) => {
-    const isActive = index === state.selectedSuggestionIndex;
-    const secondaryText = item.subtitle || (item.count !== void 0 ? item.count : "");
-    const showChevron = item.value === void 0 || item.value === null;
-    return /* @__PURE__ */ React.createElement(
-      "li",
+    ), /* @__PURE__ */ React.createElement("div", { className: "pro6pp-input-addons" }, showClearButton && state.query.length > 0 && /* @__PURE__ */ React.createElement(
+      "button",
       {
-        key: `${item.label}-${index}`,
-        role: "option",
-        "aria-selected": isActive,
-        className: `pro6pp-item ${isActive ? "pro6pp-item--active" : ""}`,
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => handleSelect(item)
+        type: "button",
+        className: "pro6pp-clear-button",
+        onClick: handleClear,
+        "aria-label": "Clear input"
       },
-      renderItem ? renderItem(item, isActive) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__label" }, item.label), secondaryText && /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
         "svg",
         {
-          width: "16",
-          height: "16",
+          width: "14",
+          height: "14",
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
@@ -553,11 +969,49 @@ var Pro6PPInfer = ({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
-      )))
-    );
-  }) : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)));
-};
+        /* @__PURE__ */ React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      )
+    ))), showDropdown && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "pro6pp-dropdown",
+        onWheel: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? /* @__PURE__ */ React.createElement(React.Fragment, null, items.map((item, index) => {
+        const isActive = index === state.selectedSuggestionIndex;
+        const secondaryText = item.subtitle || (item.count !== void 0 ? item.count : "");
+        const showChevron = item.value === void 0 || item.value === null;
+        return /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            key: `${item.label}-${index}`,
+            role: "option",
+            "aria-selected": isActive,
+            className: `pro6pp-item ${isActive ? "pro6pp-item--active" : ""}`,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => handleSelect(item)
+          },
+          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HighlightedText, { text: item.label, query: state.query }), secondaryText && /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ React.createElement(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            },
+            /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
+          )))
+        );
+      }), state.hasMore && !state.isLoading && /* @__PURE__ */ React.createElement("li", { key: "sentinel", ref: observerTarget, style: { height: "1px", opacity: 0 } }), isInfiniteLoading && /* @__PURE__ */ React.createElement("li", { key: "loader", className: "pro6pp-loader-item" }, /* @__PURE__ */ React.createElement("div", { className: "pro6pp-mini-spinner" }), /* @__PURE__ */ React.createElement("span", null, loadingText))) : state.isLoading ? /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, "Searching...") : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText))
+    ));
+  }
+);
 export {
   Pro6PPInfer,
   useInfer