@headband/react 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -1,5 +1,132 @@
 "use client";
 
+// 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) {
@@ -11,22 +138,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 = {};
@@ -45,15 +172,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
@@ -62,8 +289,8 @@ import {
   useContext,
   useCallback,
   useEffect,
-  useRef,
   useMemo,
+  useRef,
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -71,9 +298,7 @@ var HeadbandContext = createContext(null);
 function useHeadbandContext() {
   const ctx = 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;
 }
@@ -83,116 +308,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] = useState(initialQuery);
   const [results, setResults] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [refinements, setRefinements] = useState(
-    () => /* @__PURE__ */ new Map()
-  );
+  const [refinements, setRefinements] = useState(() => /* @__PURE__ */ new Map());
   const [ranges, setRanges] = useState(() => /* @__PURE__ */ new Map());
   const [sortBy, setSortBy] = useState(null);
   const [page, setPage] = useState(0);
   const [hitsPerPage, setHitsPerPage] = useState(20);
   const [facets, setFacets] = useState(() => /* @__PURE__ */ new Set());
-  const timerRef = useRef(null);
   const requestIdRef = useRef(0);
-  const refinementsRef = useRef(refinements);
-  refinementsRef.current = refinements;
-  const rangesRef = useRef(ranges);
-  rangesRef.current = ranges;
-  const facetsRef = useRef(facets);
-  facetsRef.current = facets;
+  const generatedFilter = useMemo(
+    () => buildFilterString(refinements, ranges),
+    [refinements, ranges]
+  );
+  const filter = useMemo(
+    () => combineFilters(baseFilter, generatedFilter),
+    [baseFilter, generatedFilter]
+  );
+  const facetList = useMemo(() => facets.size > 0 ? Array.from(facets) : void 0, [facets]);
+  const sortList = useMemo(() => sortBy ? [sortBy] : void 0, [sortBy]);
   const executeSearch = 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
+  ]);
   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 = useCallback((q) => {
     setQueryRaw(q);
     setPage(0);
   }, []);
-  const toggleRefinement = 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 = useCallback(
-    (attribute, range) => {
-      setRanges((prev) => {
-        const next = new Map(prev);
-        next.set(attribute, range);
-        return next;
-      });
-      setPage(0);
-    },
-    []
-  );
+  const toggleRefinement = 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 = useCallback((attribute, range) => {
+    setRanges((prev) => {
+      const next = new Map(prev);
+      next.set(attribute, range);
+      return next;
+    });
+    setPage(0);
+  }, []);
   const clearRange = useCallback((attribute) => {
     setRanges((prev) => {
       const next = new Map(prev);
@@ -217,9 +493,13 @@ function HeadbandProvider({
       return next;
     });
   }, []);
-  const refresh = useCallback(() => {
-    executeSearch();
+  const executeSearchRef = useRef(executeSearch);
+  useEffect(() => {
+    executeSearchRef.current = executeSearch;
   }, [executeSearch]);
+  const refresh = useCallback(() => {
+    executeSearchRef.current();
+  }, []);
   const state = useMemo(
     () => ({
       query,
@@ -248,11 +528,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 = useMemo(
+    () => ({ idField, ...trackingSessionId ? { sessionId: trackingSessionId } : {} }),
+    [idField, trackingSessionId]
   );
   const value = useMemo(
-    () => ({ client, index, state, actions }),
-    [client, index, state, actions]
+    () => ({ client, index, state, actions, tracking }),
+    [client, index, state, actions, tracking]
   );
   return /* @__PURE__ */ jsx(HeadbandContext.Provider, { value, children });
 }
@@ -310,18 +606,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 = useMemo3(() => {
+    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") {
@@ -502,11 +799,41 @@ function useHighlight({
   }, [hit, attribute]);
 }
 
+// src/hooks/useClickTracking.ts
+import { useCallback as useCallback7 } from "react";
+function useClickTracking() {
+  const { client, index, state, tracking } = useHeadbandContext();
+  const queryId = state.results?.queryId;
+  const { page, hitsPerPage } = state;
+  const trackClick = useCallback7(
+    (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 = useCallback7(
+    (docId, opts = {}) => client.trackConversion({
+      index,
+      docId,
+      sessionId: tracking.sessionId ?? browserSessionId(),
+      ...opts
+    }).catch(() => null),
+    [client, index, tracking]
+  );
+  return { queryId, trackClick, trackConversion };
+}
+
 // src/components/SearchBox.tsx
-import {
-  useCallback as useCallback7,
-  useRef as useRef2
-} from "react";
+import { useCallback as useCallback8, useRef as useRef2 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function SearchBox({
   placeholder = "Search...",
@@ -517,7 +844,7 @@ function SearchBox({
 }) {
   const { query, setQuery, clear } = useSearchBox();
   const inputRef = useRef2(null);
-  const handleChange = useCallback7(
+  const handleChange = useCallback8(
     (e) => {
       const value = e.target.value;
       setQuery(value);
@@ -525,15 +852,15 @@ function SearchBox({
     },
     [setQuery, onQueryChange]
   );
-  const handleClear = useCallback7(() => {
+  const handleClear = useCallback8(() => {
     clear();
     onQueryChange?.("");
     inputRef.current?.focus();
   }, [clear, onQueryChange]);
-  const handleSubmit = useCallback7((e) => {
+  const handleSubmit = useCallback8((e) => {
     e.preventDefault();
   }, []);
-  const handleKeyDown = useCallback7(
+  const handleKeyDown = useCallback8(
     (e) => {
       if (e.key === "Escape") {
         handleClear();
@@ -574,7 +901,10 @@ function SearchBox({
           "input",
           {
             ref: inputRef,
-            type: "search",
+            type: "text",
+            role: "searchbox",
+            inputMode: "search",
+            enterKeyHint: "search",
             value: query,
             onChange: handleChange,
             onKeyDown: handleKeyDown,
@@ -604,14 +934,7 @@ function SearchBox({
                 stroke: "currentColor",
                 className: "h-3.5 w-3.5",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx2(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M6 18 18 6M6 6l12 12"
-                  }
-                )
+                children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
               }
             )
           }
@@ -624,7 +947,11 @@ function SearchBox({
 // src/components/Hits.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsx3("div", { className: "rounded-lg border border-gray-200 bg-white p-4 text-sm dark:border-gray-700 dark:bg-gray-900", children: /* @__PURE__ */ jsx3("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() {
@@ -669,7 +996,7 @@ function Hits({
 }
 
 // src/components/RefinementList.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function RefinementList({
   attribute,
@@ -684,8 +1011,8 @@ function RefinementList({
     limit,
     sortBy
   });
-  const handleChange = useCallback8(
-    (value) => (_e) => {
+  const handleChange = useCallback9(
+    (value) => () => {
       refine(value);
     },
     [refine]
@@ -744,14 +1071,14 @@ function RefinementList({
 }
 
 // src/components/Pagination.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Pagination({ className, styled = true }) {
   const { currentPage, totalPages, setPage, canPrevious, canNext, pages } = usePagination();
-  const handlePrevious = useCallback9(() => {
+  const handlePrevious = useCallback10(() => {
     setPage(currentPage - 1);
   }, [setPage, currentPage]);
-  const handleNext = useCallback9(() => {
+  const handleNext = useCallback10(() => {
     setPage(currentPage + 1);
   }, [setPage, currentPage]);
   if (totalPages <= 1) return null;
@@ -854,7 +1181,7 @@ function Stats({ className, styled = true, render }) {
 }
 
 // src/components/SortBy.tsx
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback11 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function SortBy({
   items: itemsProp,
@@ -863,7 +1190,7 @@ function SortBy({
   label = "Sort by"
 }) {
   const { currentSort, setSort, items } = useSortBy({ items: itemsProp });
-  const handleChange = useCallback10(
+  const handleChange = useCallback11(
     (e) => {
       const value = e.target.value;
       setSort(value === "" ? null : value);
@@ -914,11 +1241,7 @@ function Highlight({
 }
 
 // src/components/RangeInput.tsx
-import {
-  useState as useState2,
-  useCallback as useCallback11,
-  useEffect as useEffect3
-} from "react";
+import { useCallback as useCallback12 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function RangeInput({
   attribute,
@@ -929,17 +1252,15 @@ function RangeInput({
   maxPlaceholder = "Max"
 }) {
   const { min, max, stats, setRange, clear } = useRange({ attribute });
-  const [localMin, setLocalMin] = useState2(min !== void 0 ? String(min) : "");
-  const [localMax, setLocalMax] = useState2(max !== void 0 ? String(max) : "");
-  useEffect3(() => {
-    setLocalMin(min !== void 0 ? String(min) : "");
-  }, [min]);
-  useEffect3(() => {
-    setLocalMax(max !== void 0 ? String(max) : "");
-  }, [max]);
-  const handleSubmit = useCallback11(
+  const defaultMin = min !== void 0 ? String(min) : "";
+  const defaultMax = max !== void 0 ? String(max) : "";
+  const formKey = `${attribute}:${defaultMin}:${defaultMax}`;
+  const handleSubmit = useCallback12(
     (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) {
@@ -951,15 +1272,7 @@ function RangeInput({
         });
       }
     },
-    [localMin, localMax, setRange, clear]
-  );
-  const handleMinChange = useCallback11(
-    (e) => setLocalMin(e.target.value),
-    []
-  );
-  const handleMaxChange = useCallback11(
-    (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" : "";
@@ -994,9 +1307,9 @@ function RangeInput({
           /* @__PURE__ */ jsx9(
             "input",
             {
+              name: "min",
               type: "number",
-              value: localMin,
-              onChange: handleMinChange,
+              defaultValue: defaultMin,
               placeholder: minPlaceholder,
               "aria-label": `Minimum ${attribute}`,
               className: inputClass
@@ -1013,9 +1326,9 @@ function RangeInput({
           /* @__PURE__ */ jsx9(
             "input",
             {
+              name: "max",
               type: "number",
-              value: localMax,
-              onChange: handleMaxChange,
+              defaultValue: defaultMax,
               placeholder: maxPlaceholder,
               "aria-label": `Maximum ${attribute}`,
               className: inputClass
@@ -1024,7 +1337,8 @@ function RangeInput({
           /* @__PURE__ */ jsx9("button", { type: "submit", className: buttonClass, children: "Go" })
         ] })
       ]
-    }
+    },
+    formKey
   );
 }
 
@@ -1084,7 +1398,23 @@ export {
   SearchBox,
   SortBy,
   Stats,
+  andFilters,
+  assignExperiment,
+  browserSessionId,
+  buildExperimentConfigPath,
+  chooseExperimentVariant,
+  combineFilters,
+  experimentSearchMetadata,
+  filterEq,
+  filterExists,
+  filterIn,
+  filterNotEq,
+  filterRange,
   headband,
+  isRunnableExperiment,
+  orFilters,
+  quoteFilterValue,
+  useClickTracking,
   useHeadbandContext,
   useHighlight,
   useHits,