@headband/react 0.1.1 → 0.2.1

package/dist/index.js

@@ -32,7 +32,23 @@ __export(index_exports, {
   SearchBox: () => SearchBox,
   SortBy: () => SortBy,
   Stats: () => Stats,
+  andFilters: () => andFilters,
+  assignExperiment: () => assignExperiment,
+  browserSessionId: () => browserSessionId,
+  buildExperimentConfigPath: () => buildExperimentConfigPath,
+  chooseExperimentVariant: () => chooseExperimentVariant,
+  combineFilters: () => combineFilters,
+  experimentSearchMetadata: () => experimentSearchMetadata,
+  filterEq: () => filterEq,
+  filterExists: () => filterExists,
+  filterIn: () => filterIn,
+  filterNotEq: () => filterNotEq,
+  filterRange: () => filterRange,
   headband: () => headband,
+  isRunnableExperiment: () => isRunnableExperiment,
+  orFilters: () => orFilters,
+  quoteFilterValue: () => quoteFilterValue,
+  useClickTracking: () => useClickTracking,
   useHeadbandContext: () => useHeadbandContext,
   useHighlight: () => useHighlight,
   useHits: () => useHits,
@@ -46,6 +62,133 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/experiments.ts
+function stableHash(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i += 1) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function bucket(input, max) {
+  if (max <= 0) return 0;
+  return stableHash(input) % max;
+}
+function assignmentSeed(config, subjectId, scope) {
+  return `${config.assignmentSalt || config.experimentKey}:${config.experimentKey}:${scope}:${subjectId}`;
+}
+function buildExperimentConfigPath(query = {}) {
+  const params = new URLSearchParams();
+  if (query.projectId) params.set("projectId", query.projectId);
+  if (query.indexUid) params.set("indexUid", query.indexUid);
+  if (query.experimentKey) params.set("experimentKey", query.experimentKey);
+  const search = params.toString();
+  return `/v1/experiments/config${search ? `?${search}` : ""}`;
+}
+function isRunnableExperiment(config) {
+  return config.status === "active" && !config.killSwitch && config.trafficPercent > 0 && config.variants.length > 0;
+}
+function chooseExperimentVariant(config, subjectId) {
+  if (!isRunnableExperiment(config)) return null;
+  const trafficBucket = bucket(assignmentSeed(config, subjectId, "traffic"), 1e4) / 100;
+  if (trafficBucket >= config.trafficPercent) return null;
+  const totalWeight = config.variants.reduce(
+    (sum, variant) => sum + Math.max(0, variant.weight),
+    0
+  );
+  if (totalWeight <= 0) return null;
+  const variantBucket = bucket(assignmentSeed(config, subjectId, "variant"), totalWeight);
+  let cursor = 0;
+  for (const variant of config.variants) {
+    cursor += Math.max(0, variant.weight);
+    if (variantBucket < cursor) return variant;
+  }
+  return config.variants[config.variants.length - 1] ?? null;
+}
+function assignExperiment(config, subjectId, options = {}) {
+  const variant = chooseExperimentVariant(config, subjectId);
+  if (!variant) return null;
+  return {
+    experimentKey: config.experimentKey,
+    variant: variant.key,
+    indexUid: variant.indexUid,
+    sessionId: options.sessionId ?? subjectId,
+    config
+  };
+}
+function experimentSearchMetadata(assignment) {
+  if (!assignment) return void 0;
+  return {
+    experimentKey: assignment.experimentKey,
+    variant: assignment.variant,
+    ...assignment.sessionId ? { sessionId: assignment.sessionId } : {}
+  };
+}
+
+// src/events.ts
+var SESSION_KEY = "headband.sessionId";
+var CLICKS_KEY = "headband.clickedQueries";
+var CLICKS_MAX = 50;
+var memorySession = null;
+var memoryClicks = [];
+function randomId() {
+  const c = globalThis.crypto;
+  if (c?.randomUUID) return `s_${c.randomUUID().replace(/-/g, "").slice(0, 20)}`;
+  return `s_${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`.slice(
+    0,
+    22
+  );
+}
+function storage() {
+  try {
+    return typeof sessionStorage === "undefined" ? null : sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function browserSessionId() {
+  const s = storage();
+  try {
+    const stored = s?.getItem(SESSION_KEY);
+    if (stored) return stored;
+  } catch {
+  }
+  if (!memorySession) memorySession = randomId();
+  try {
+    s?.setItem(SESSION_KEY, memorySession);
+  } catch {
+  }
+  return memorySession;
+}
+function readClicks() {
+  const s = storage();
+  try {
+    const raw = s?.getItem(CLICKS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) return parsed;
+    }
+  } catch {
+  }
+  return memoryClicks;
+}
+function rememberClick(index, docId, queryId) {
+  const k = `${index}
+${String(docId)}`;
+  const next = [...readClicks().filter(([key]) => key !== k), [k, queryId]];
+  memoryClicks = next.slice(-CLICKS_MAX);
+  try {
+    storage()?.setItem(CLICKS_KEY, JSON.stringify(memoryClicks));
+  } catch {
+  }
+}
+function clickedFrom(index, docId) {
+  const k = `${index}
+${String(docId)}`;
+  return readClicks().find(([key]) => key === k)?.[1];
+}
+
 // src/client.ts
 var HeadbandError = class extends Error {
   constructor(message, status, code) {
@@ -57,22 +200,22 @@ var HeadbandError = class extends Error {
 };
 function headband(host, apiKey) {
   const baseUrl = host.replace(/\/+$/, "");
-  async function request(path, body) {
+  async function request(path, options = {}) {
+    const method = options.method ?? "POST";
     let response;
     try {
       response = await fetch(`${baseUrl}${path}`, {
-        method: "POST",
+        method,
         headers: {
-          "Content-Type": "application/json",
+          ...method === "POST" ? { "Content-Type": "application/json" } : {},
           Authorization: `Bearer ${apiKey}`
         },
-        body: JSON.stringify(body)
+        ...method === "POST" ? { body: JSON.stringify(options.body ?? {}) } : {},
+        // An event sent as the page navigates away (a click on a result link) still arrives.
+        ...options.keepalive ? { keepalive: true } : {}
       });
     } catch (err) {
-      throw new HeadbandError(
-        err instanceof Error ? err.message : "Network request failed",
-        0
-      );
+      throw new HeadbandError(err instanceof Error ? err.message : "Network request failed", 0);
     }
     if (!response.ok) {
       let errorBody = {};
@@ -91,15 +234,115 @@ function headband(host, apiKey) {
   return {
     search(index, query, params) {
       return request("/v1/search", {
-        index,
-        q: query,
-        ...params
+        body: {
+          index,
+          q: query,
+          ...params
+        }
       });
     },
     multiSearch(queries) {
-      return request("/v1/multi-search", { queries });
+      return request("/v1/multi-search", { body: { queries } });
+    },
+    async getExperimentConfigs(query) {
+      const response = await request(
+        buildExperimentConfigPath(query),
+        { method: "GET" }
+      );
+      return { experiments: response.data?.experiments ?? [] };
+    },
+    async assignExperiment(query) {
+      const response = await request(
+        "/v1/experiments/assign",
+        { body: query }
+      );
+      if (!response.data) {
+        throw new HeadbandError("Experiment assignment response missing data", 500);
+      }
+      return response.data;
+    },
+    async recordExperimentEvent(event) {
+      const response = await request("/v1/experiments/events", {
+        body: event
+      });
+      if (!response.data) {
+        throw new HeadbandError("Experiment event response missing data", 500);
+      }
+      return response.data;
+    },
+    warm(target, opts) {
+      return request("/v1/warm", {
+        body: { ...target, ...opts?.level ? { level: opts.level } : {} }
+      });
+    },
+    sendEvents,
+    trackClick(event) {
+      if (event.queryId) rememberClick(event.index, event.docId, event.queryId);
+      return sendEvents([{ type: "search_result_click", ...event }]);
+    },
+    trackConversion(event) {
+      const queryId = event.queryId ?? clickedFrom(event.index, event.docId);
+      return sendEvents([{ type: "conversion", ...event, ...queryId ? { queryId } : {} }]);
     }
   };
+  function sendEvents(events) {
+    return request("/v1/relevance/events", {
+      body: { events },
+      keepalive: true
+    });
+  }
+}
+
+// src/filters.ts
+function quoteFilterValue(value) {
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+function filterEq(attribute, value) {
+  return `${attribute} = ${quoteFilterValue(value)}`;
+}
+function filterNotEq(attribute, value) {
+  return `${attribute} != ${quoteFilterValue(value)}`;
+}
+function filterIn(attribute, values) {
+  return `${attribute} IN [${values.map(quoteFilterValue).join(", ")}]`;
+}
+function filterExists(attribute) {
+  return `${attribute} EXISTS`;
+}
+function filterRange(attribute, range) {
+  const parts = [];
+  const gte = range.gte ?? range.min;
+  const lte = range.lte ?? range.max;
+  if (range.gt !== void 0) parts.push(`${attribute} > ${range.gt}`);
+  if (gte !== void 0) parts.push(`${attribute} >= ${gte}`);
+  if (range.lt !== void 0) parts.push(`${attribute} < ${range.lt}`);
+  if (lte !== void 0) parts.push(`${attribute} <= ${lte}`);
+  return parts.length ? andFilters(...parts) : void 0;
+}
+function normalizeFilter(input) {
+  if (!input) return [];
+  return (Array.isArray(input) ? input : [input]).filter((part) => Boolean(part));
+}
+function andFilters(...filters) {
+  const parts = filters.flatMap(normalizeFilter);
+  if (parts.length === 0) return void 0;
+  if (parts.length === 1) return parts[0];
+  return parts.map((part) => `(${part})`).join(" AND ");
+}
+function orFilters(...filters) {
+  const parts = filters.flatMap(normalizeFilter);
+  if (parts.length === 0) return void 0;
+  if (parts.length === 1) return parts[0];
+  return parts.map((part) => `(${part})`).join(" OR ");
+}
+function combineFilters(baseFilter, generatedFilter) {
+  const base = normalizeFilter(baseFilter);
+  const generated = normalizeFilter(generatedFilter);
+  const combined = [...base, ...generated];
+  if (combined.length === 0) return void 0;
+  if (combined.length === 1) return combined[0];
+  return combined;
 }
 
 // src/provider.tsx
@@ -109,9 +352,7 @@ var HeadbandContext = (0, import_react.createContext)(null);
 function useHeadbandContext() {
   const ctx = (0, import_react.useContext)(HeadbandContext);
   if (!ctx) {
-    throw new Error(
-      "useHeadbandContext must be used within a <HeadbandProvider>."
-    );
+    throw new Error("useHeadbandContext must be used within a <HeadbandProvider>.");
   }
   return ctx;
 }
@@ -121,116 +362,167 @@ function buildFilterString(refinements, ranges) {
     if (values.size === 0) return;
     if (values.size === 1) {
       const [v] = values;
-      parts.push(`${attribute} = "${v}"`);
+      parts.push(filterEq(attribute, v));
     } else {
-      const list = Array.from(values).map((v) => `"${v}"`).join(", ");
-      parts.push(`${attribute} IN [${list}]`);
+      parts.push(filterIn(attribute, Array.from(values)));
     }
   });
   ranges.forEach((range, attribute) => {
     if (range.min !== void 0) {
-      parts.push(`${attribute} >= ${range.min}`);
+      const generated = filterRange(attribute, { min: range.min });
+      if (generated) parts.push(generated);
     }
     if (range.max !== void 0) {
-      parts.push(`${attribute} <= ${range.max}`);
+      const generated = filterRange(attribute, { max: range.max });
+      if (generated) parts.push(generated);
     }
   });
   return parts.length > 0 ? parts.join(" AND ") : void 0;
 }
+function facetCountQueries(facets, refinements, ranges, baseFilter) {
+  const queries = [];
+  facets.forEach((attribute) => {
+    if ((refinements.get(attribute)?.size ?? 0) === 0) return;
+    const others = new Map(refinements);
+    others.delete(attribute);
+    queries.push({
+      attribute,
+      filter: combineFilters(baseFilter, buildFilterString(others, ranges))
+    });
+  });
+  return queries;
+}
+async function searchWithFacetCounts(client, index, query, params, countQueries) {
+  const [main, ...counts] = await Promise.all([
+    client.search(index, query, params),
+    ...countQueries.map(
+      (cq) => client.search(index, query, {
+        // One hit is the least every engine accepts. Only the counts are read.
+        limit: 1,
+        facets: [cq.attribute],
+        ...cq.filter ? { filter: cq.filter } : {},
+        ...params.mode ? { mode: params.mode } : {}
+      }).catch(() => null)
+    )
+  ]);
+  if (countQueries.length === 0) return main;
+  const facetDistribution = { ...main.facetDistribution ?? {} };
+  countQueries.forEach((cq, i) => {
+    const counted = counts[i]?.facetDistribution?.[cq.attribute];
+    if (counted) facetDistribution[cq.attribute] = counted;
+  });
+  return { ...main, facetDistribution };
+}
 function HeadbandProvider({
   client,
   index,
   initialQuery = "",
+  experiment = null,
+  baseFilter,
+  mode,
+  disjunctiveFacets = true,
+  idField = "id",
+  sessionId,
   children
 }) {
   const [query, setQueryRaw] = (0, import_react.useState)(initialQuery);
   const [results, setResults] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
-  const [refinements, setRefinements] = (0, import_react.useState)(
-    () => /* @__PURE__ */ new Map()
-  );
+  const [refinements, setRefinements] = (0, import_react.useState)(() => /* @__PURE__ */ new Map());
   const [ranges, setRanges] = (0, import_react.useState)(() => /* @__PURE__ */ new Map());
   const [sortBy, setSortBy] = (0, import_react.useState)(null);
   const [page, setPage] = (0, import_react.useState)(0);
   const [hitsPerPage, setHitsPerPage] = (0, import_react.useState)(20);
   const [facets, setFacets] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
-  const timerRef = (0, import_react.useRef)(null);
   const requestIdRef = (0, import_react.useRef)(0);
-  const refinementsRef = (0, import_react.useRef)(refinements);
-  refinementsRef.current = refinements;
-  const rangesRef = (0, import_react.useRef)(ranges);
-  rangesRef.current = ranges;
-  const facetsRef = (0, import_react.useRef)(facets);
-  facetsRef.current = facets;
+  const generatedFilter = (0, import_react.useMemo)(
+    () => buildFilterString(refinements, ranges),
+    [refinements, ranges]
+  );
+  const filter = (0, import_react.useMemo)(
+    () => combineFilters(baseFilter, generatedFilter),
+    [baseFilter, generatedFilter]
+  );
+  const facetList = (0, import_react.useMemo)(() => facets.size > 0 ? Array.from(facets) : void 0, [facets]);
+  const sortList = (0, import_react.useMemo)(() => sortBy ? [sortBy] : void 0, [sortBy]);
   const executeSearch = (0, import_react.useCallback)(() => {
-    const id = ++requestIdRef.current;
+    const requestId = ++requestIdRef.current;
     setIsLoading(true);
     setError(null);
-    const filter = buildFilterString(refinementsRef.current, rangesRef.current);
-    const facetList = facetsRef.current.size > 0 ? Array.from(facetsRef.current) : void 0;
-    const sortList = sortBy ? [sortBy] : void 0;
     const params = {
       limit: hitsPerPage,
       offset: page * hitsPerPage,
       ...filter ? { filter } : {},
       ...facetList ? { facets: facetList } : {},
       ...sortList ? { sort: sortList } : {},
+      ...experiment ? experiment : {},
+      ...mode ? { mode } : {},
       attributesToHighlight: ["*"]
     };
-    client.search(index, query, params).then((res) => {
-      if (id === requestIdRef.current) {
-        setResults(res);
-        setIsLoading(false);
+    const countQueries = disjunctiveFacets ? facetCountQueries(facets, refinements, ranges, baseFilter) : [];
+    searchWithFacetCounts(client, index, query, params, countQueries).then((res) => {
+      if (requestId !== requestIdRef.current) {
+        return;
       }
+      setResults(res);
+      setIsLoading(false);
     }).catch((err) => {
-      if (id === requestIdRef.current) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setIsLoading(false);
+      if (requestId !== requestIdRef.current) {
+        return;
       }
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsLoading(false);
     });
-  }, [client, index, query, sortBy, page, hitsPerPage]);
+  }, [
+    client,
+    index,
+    query,
+    filter,
+    facetList,
+    sortList,
+    experiment,
+    mode,
+    page,
+    hitsPerPage,
+    disjunctiveFacets,
+    facets,
+    refinements,
+    ranges,
+    baseFilter
+  ]);
   (0, import_react.useEffect)(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-    timerRef.current = setTimeout(executeSearch, 200);
+    const timer = setTimeout(executeSearch, 200);
     return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
+      clearTimeout(timer);
     };
-  }, [executeSearch, refinements, ranges, facets]);
+  }, [executeSearch]);
   const setQuery = (0, import_react.useCallback)((q) => {
     setQueryRaw(q);
     setPage(0);
   }, []);
-  const toggleRefinement = (0, import_react.useCallback)(
-    (attribute, value2) => {
-      setRefinements((prev) => {
-        const next = new Map(prev);
-        const current = new Set(next.get(attribute) ?? []);
-        if (current.has(value2)) {
-          current.delete(value2);
-        } else {
-          current.add(value2);
-        }
-        next.set(attribute, current);
-        return next;
-      });
-      setPage(0);
-    },
-    []
-  );
-  const setRange = (0, import_react.useCallback)(
-    (attribute, range) => {
-      setRanges((prev) => {
-        const next = new Map(prev);
-        next.set(attribute, range);
-        return next;
-      });
-      setPage(0);
-    },
-    []
-  );
+  const toggleRefinement = (0, import_react.useCallback)((attribute, value2) => {
+    setRefinements((prev) => {
+      const next = new Map(prev);
+      const current = new Set(next.get(attribute) ?? []);
+      if (current.has(value2)) {
+        current.delete(value2);
+      } else {
+        current.add(value2);
+      }
+      next.set(attribute, current);
+      return next;
+    });
+    setPage(0);
+  }, []);
+  const setRange = (0, import_react.useCallback)((attribute, range) => {
+    setRanges((prev) => {
+      const next = new Map(prev);
+      next.set(attribute, range);
+      return next;
+    });
+    setPage(0);
+  }, []);
   const clearRange = (0, import_react.useCallback)((attribute) => {
     setRanges((prev) => {
       const next = new Map(prev);
@@ -255,9 +547,13 @@ function HeadbandProvider({
       return next;
     });
   }, []);
-  const refresh = (0, import_react.useCallback)(() => {
-    executeSearch();
+  const executeSearchRef = (0, import_react.useRef)(executeSearch);
+  (0, import_react.useEffect)(() => {
+    executeSearchRef.current = executeSearch;
   }, [executeSearch]);
+  const refresh = (0, import_react.useCallback)(() => {
+    executeSearchRef.current();
+  }, []);
   const state = (0, import_react.useMemo)(
     () => ({
       query,
@@ -286,11 +582,27 @@ function HeadbandProvider({
       unregisterFacet,
       refresh
     }),
-    [setQuery, toggleRefinement, setRange, clearRange, registerFacet, unregisterFacet, refresh]
+    [
+      setQuery,
+      setPage,
+      setSortBy,
+      setHitsPerPage,
+      toggleRefinement,
+      setRange,
+      clearRange,
+      registerFacet,
+      unregisterFacet,
+      refresh
+    ]
+  );
+  const trackingSessionId = sessionId ?? experiment?.sessionId;
+  const tracking = (0, import_react.useMemo)(
+    () => ({ idField, ...trackingSessionId ? { sessionId: trackingSessionId } : {} }),
+    [idField, trackingSessionId]
   );
   const value = (0, import_react.useMemo)(
-    () => ({ client, index, state, actions }),
-    [client, index, state, actions]
+    () => ({ client, index, state, actions, tracking }),
+    [client, index, state, actions, tracking]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadbandContext.Provider, { value, children });
 }
@@ -348,18 +660,19 @@ function useRefinementList({
       actions.unregisterFacet(attribute);
     };
   }, [attribute, actions]);
-  const refined = state.refinements.get(attribute) ?? /* @__PURE__ */ new Set();
+  const refined = state.refinements.get(attribute);
   const items = (0, import_react4.useMemo)(() => {
+    const activeRefinements = refined ?? /* @__PURE__ */ new Set();
     const distribution = state.results?.facetDistribution?.[attribute] ?? {};
     const allValues = /* @__PURE__ */ new Set([
       ...Object.keys(distribution),
-      ...refined
+      ...activeRefinements
     ]);
     let result = Array.from(allValues).map(
       (value) => ({
         value,
         count: distribution[value] ?? 0,
-        isRefined: refined.has(value)
+        isRefined: activeRefinements.has(value)
       })
     );
     if (sortOrder === "alpha") {
@@ -540,8 +853,41 @@ function useHighlight({
   }, [hit, attribute]);
 }
 
-// src/components/SearchBox.tsx
+// src/hooks/useClickTracking.ts
 var import_react10 = require("react");
+function useClickTracking() {
+  const { client, index, state, tracking } = useHeadbandContext();
+  const queryId = state.results?.queryId;
+  const { page, hitsPerPage } = state;
+  const trackClick = (0, import_react10.useCallback)(
+    (hit, positionOnPage) => {
+      const raw = hit[tracking.idField] ?? hit.__data?.[tracking.idField];
+      if (typeof raw !== "string" && typeof raw !== "number") return Promise.resolve(null);
+      const position = typeof positionOnPage === "number" && positionOnPage >= 0 ? page * hitsPerPage + positionOnPage + 1 : void 0;
+      return client.trackClick({
+        index,
+        docId: raw,
+        ...queryId ? { queryId } : {},
+        ...position ? { position } : {},
+        sessionId: tracking.sessionId ?? browserSessionId()
+      }).catch(() => null);
+    },
+    [client, index, queryId, page, hitsPerPage, tracking]
+  );
+  const trackConversion = (0, import_react10.useCallback)(
+    (docId, opts = {}) => client.trackConversion({
+      index,
+      docId,
+      sessionId: tracking.sessionId ?? browserSessionId(),
+      ...opts
+    }).catch(() => null),
+    [client, index, tracking]
+  );
+  return { queryId, trackClick, trackConversion };
+}
+
+// src/components/SearchBox.tsx
+var import_react11 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SearchBox({
   placeholder = "Search...",
@@ -551,8 +897,8 @@ function SearchBox({
   styled = true
 }) {
   const { query, setQuery, clear } = useSearchBox();
-  const inputRef = (0, import_react10.useRef)(null);
-  const handleChange = (0, import_react10.useCallback)(
+  const inputRef = (0, import_react11.useRef)(null);
+  const handleChange = (0, import_react11.useCallback)(
     (e) => {
       const value = e.target.value;
       setQuery(value);
@@ -560,15 +906,15 @@ function SearchBox({
     },
     [setQuery, onQueryChange]
   );
-  const handleClear = (0, import_react10.useCallback)(() => {
+  const handleClear = (0, import_react11.useCallback)(() => {
     clear();
     onQueryChange?.("");
     inputRef.current?.focus();
   }, [clear, onQueryChange]);
-  const handleSubmit = (0, import_react10.useCallback)((e) => {
+  const handleSubmit = (0, import_react11.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  const handleKeyDown = (0, import_react10.useCallback)(
+  const handleKeyDown = (0, import_react11.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         handleClear();
@@ -609,7 +955,10 @@ function SearchBox({
           "input",
           {
             ref: inputRef,
-            type: "search",
+            type: "text",
+            role: "searchbox",
+            inputMode: "search",
+            enterKeyHint: "search",
             value: query,
             onChange: handleChange,
             onKeyDown: handleKeyDown,
@@ -639,14 +988,7 @@ function SearchBox({
                 stroke: "currentColor",
                 className: "h-3.5 w-3.5",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M6 18 18 6M6 6l12 12"
-                  }
-                )
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
               }
             )
           }
@@ -659,7 +1001,11 @@ function SearchBox({
 // src/components/Hits.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DefaultHit({ hit }) {
-  const { _formatted, __data, ...rest } = hit;
+  const rest = Object.fromEntries(
+    Object.entries(hit).filter(
+      ([key]) => key !== "_formatted" && key !== "__data"
+    )
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg border border-gray-200 bg-white p-4 text-sm dark:border-gray-700 dark:bg-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-x-auto whitespace-pre-wrap text-xs text-gray-700 dark:text-gray-300", children: JSON.stringify(rest, null, 2) }) });
 }
 function DefaultEmpty() {
@@ -704,7 +1050,7 @@ function Hits({
 }
 
 // src/components/RefinementList.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function RefinementList({
   attribute,
@@ -719,8 +1065,8 @@ function RefinementList({
     limit,
     sortBy
   });
-  const handleChange = (0, import_react11.useCallback)(
-    (value) => (_e) => {
+  const handleChange = (0, import_react12.useCallback)(
+    (value) => () => {
       refine(value);
     },
     [refine]
@@ -779,14 +1125,14 @@ function RefinementList({
 }
 
 // src/components/Pagination.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Pagination({ className, styled = true }) {
   const { currentPage, totalPages, setPage, canPrevious, canNext, pages } = usePagination();
-  const handlePrevious = (0, import_react12.useCallback)(() => {
+  const handlePrevious = (0, import_react13.useCallback)(() => {
     setPage(currentPage - 1);
   }, [setPage, currentPage]);
-  const handleNext = (0, import_react12.useCallback)(() => {
+  const handleNext = (0, import_react13.useCallback)(() => {
     setPage(currentPage + 1);
   }, [setPage, currentPage]);
   if (totalPages <= 1) return null;
@@ -889,7 +1235,7 @@ function Stats({ className, styled = true, render }) {
 }
 
 // src/components/SortBy.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function SortBy({
   items: itemsProp,
@@ -898,7 +1244,7 @@ function SortBy({
   label = "Sort by"
 }) {
   const { currentSort, setSort, items } = useSortBy({ items: itemsProp });
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react14.useCallback)(
     (e) => {
       const value = e.target.value;
       setSort(value === "" ? null : value);
@@ -949,7 +1295,7 @@ function Highlight({
 }
 
 // src/components/RangeInput.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function RangeInput({
   attribute,
@@ -960,17 +1306,15 @@ function RangeInput({
   maxPlaceholder = "Max"
 }) {
   const { min, max, stats, setRange, clear } = useRange({ attribute });
-  const [localMin, setLocalMin] = (0, import_react14.useState)(min !== void 0 ? String(min) : "");
-  const [localMax, setLocalMax] = (0, import_react14.useState)(max !== void 0 ? String(max) : "");
-  (0, import_react14.useEffect)(() => {
-    setLocalMin(min !== void 0 ? String(min) : "");
-  }, [min]);
-  (0, import_react14.useEffect)(() => {
-    setLocalMax(max !== void 0 ? String(max) : "");
-  }, [max]);
-  const handleSubmit = (0, import_react14.useCallback)(
+  const defaultMin = min !== void 0 ? String(min) : "";
+  const defaultMax = max !== void 0 ? String(max) : "";
+  const formKey = `${attribute}:${defaultMin}:${defaultMax}`;
+  const handleSubmit = (0, import_react15.useCallback)(
     (e) => {
       e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      const localMin = String(formData.get("min") ?? "");
+      const localMax = String(formData.get("max") ?? "");
       const parsedMin = localMin !== "" ? Number(localMin) : void 0;
       const parsedMax = localMax !== "" ? Number(localMax) : void 0;
       if (parsedMin === void 0 && parsedMax === void 0) {
@@ -982,15 +1326,7 @@ function RangeInput({
         });
       }
     },
-    [localMin, localMax, setRange, clear]
-  );
-  const handleMinChange = (0, import_react14.useCallback)(
-    (e) => setLocalMin(e.target.value),
-    []
-  );
-  const handleMaxChange = (0, import_react14.useCallback)(
-    (e) => setLocalMax(e.target.value),
-    []
+    [setRange, clear]
   );
   const containerClass = styled ? `space-y-2 ${className ?? ""}`.trim() : className ?? "";
   const inputClass = styled ? "w-full rounded border border-gray-200 bg-white px-2.5 py-1.5 text-sm outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" : "";
@@ -1025,9 +1361,9 @@ function RangeInput({
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
+              name: "min",
               type: "number",
-              value: localMin,
-              onChange: handleMinChange,
+              defaultValue: defaultMin,
               placeholder: minPlaceholder,
               "aria-label": `Minimum ${attribute}`,
               className: inputClass
@@ -1044,9 +1380,9 @@ function RangeInput({
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
+              name: "max",
               type: "number",
-              value: localMax,
-              onChange: handleMaxChange,
+              defaultValue: defaultMax,
               placeholder: maxPlaceholder,
               "aria-label": `Maximum ${attribute}`,
               className: inputClass
@@ -1055,7 +1391,8 @@ function RangeInput({
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "submit", className: buttonClass, children: "Go" })
         ] })
       ]
-    }
+    },
+    formKey
   );
 }
 
@@ -1116,7 +1453,23 @@ function PoweredBy({
   SearchBox,
   SortBy,
   Stats,
+  andFilters,
+  assignExperiment,
+  browserSessionId,
+  buildExperimentConfigPath,
+  chooseExperimentVariant,
+  combineFilters,
+  experimentSearchMetadata,
+  filterEq,
+  filterExists,
+  filterIn,
+  filterNotEq,
+  filterRange,
   headband,
+  isRunnableExperiment,
+  orFilters,
+  quoteFilterValue,
+  useClickTracking,
   useHeadbandContext,
   useHighlight,
   useHits,