@huskel/sdk 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,180 +1,79 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
 // src/api.ts
+var MAX_RETRIES = 3;
+var RETRY_DELAYS = [500, 1e3, 2e3];
+function log(level, msg, data) {
+  const prefix = "[Huskel]";
+  if (level === "error") console.error(prefix, msg, data != null ? data : "");
+  else if (level === "warn") console.warn(prefix, msg, data != null ? data : "");
+  else console.log(prefix, msg, data != null ? data : "");
+}
+async function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
 var HuskelAPI = class {
-  constructor(apiUrl, siteId) {
+  constructor(apiUrl, siteId, apiToken) {
     this.apiUrl = apiUrl;
     this.siteId = siteId;
+    this.apiToken = apiToken;
   }
-  async post(path, body) {
-    const res = await fetch(`${this.apiUrl}${path}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body)
-    });
-    if (!res.ok) {
-      const err = await res.text();
-      throw new Error(`Huskel API ${path} [${res.status}]: ${err}`);
+  async post(path, body, attempt = 0) {
+    const url = `${this.apiUrl}${path}`;
+    try {
+      const res = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Huskel-Token": this.apiToken,
+          "X-Huskel-Site": this.siteId
+        },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        const err = { status: res.status, message: text };
+        if (res.status >= 400 && res.status < 500) {
+          log("error", `${path} failed [${res.status}]`, text);
+          throw err;
+        }
+        if (attempt < MAX_RETRIES - 1) {
+          log("warn", `${path} [${res.status}] retrying (${attempt + 1}/${MAX_RETRIES})...`);
+          await sleep(RETRY_DELAYS[attempt]);
+          return this.post(path, body, attempt + 1);
+        }
+        log("error", `${path} failed after ${MAX_RETRIES} attempts`, err);
+        throw err;
+      }
+      return res.json();
+    } catch (e) {
+      if (e.status === void 0) {
+        if (attempt < MAX_RETRIES - 1) {
+          log("warn", `${path} network error, retrying (${attempt + 1}/${MAX_RETRIES})...`);
+          await sleep(RETRY_DELAYS[attempt]);
+          return this.post(path, body, attempt + 1);
+        }
+        log("error", `${path} unreachable after ${MAX_RETRIES} attempts`);
+      }
+      throw e;
     }
-    return res.json();
   }
   async ingest(product) {
+    log("info", "ingesting product", product.name);
     return this.post("/ingest", { siteId: this.siteId, product });
   }
   async ingestBatch(products) {
+    log("info", `ingesting batch of ${products.length} products`);
     return this.post("/ingest/batch", { siteId: this.siteId, products });
   }
   async search(query, limit = 10) {
+    log("info", "search query", query);
     return this.post("/search", { query, siteId: this.siteId, limit });
   }
-  async pushConfig(config) {
-    return this.post("/sites/config", __spreadValues({ siteId: this.siteId }, config));
-  }
-};
-
-// src/extractor.ts
-function getText(el, selector) {
-  var _a, _b;
-  if (!selector) return "";
-  const found = el.querySelector(selector);
-  return (_b = (_a = found == null ? void 0 : found.textContent) == null ? void 0 : _a.trim()) != null ? _b : "";
-}
-function getAttr(el, selector, attr) {
-  var _a, _b;
-  if (!selector) return "";
-  const found = el.querySelector(selector);
-  return (_b = (_a = found == null ? void 0 : found.getAttribute(attr)) == null ? void 0 : _a.trim()) != null ? _b : "";
-}
-function getAll(el, selector) {
-  if (!selector) return [];
-  return Array.from(el.querySelectorAll(selector)).map((n) => {
-    var _a;
-    return n.getAttribute("src") || n.getAttribute("href") || ((_a = n.textContent) == null ? void 0 : _a.trim()) || "";
-  }).filter(Boolean);
-}
-function parsePrice(raw) {
-  const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
-  return isNaN(num) ? void 0 : num;
-}
-function extractProducts(config) {
-  const containers = document.querySelectorAll(config.selectorContainer);
-  if (!containers.length) return [];
-  const products = [];
-  containers.forEach((el) => {
-    var _a;
-    const name = getText(el, config.selectorName);
-    const price = getText(el, config.selectorPrice);
-    const rawUrl = getAttr(el, config.selectorUrl, "href") || el.href || window.location.href;
-    const url = rawUrl.startsWith("http") ? rawUrl : `${window.location.origin}${rawUrl}`;
-    if (!name || !price || !url) return;
-    const product = {
-      name,
-      price,
-      url,
-      brand: getText(el, config.selectorBrand) || void 0,
-      description: getText(el, config.selectorDescription) || void 0,
-      originalPrice: getText(el, config.selectorOriginalPrice) || void 0,
-      discount: getText(el, config.selectorDiscount) || void 0,
-      currency: (_a = config.currency) != null ? _a : "KES",
-      availability: getText(el, config.selectorAvailability) || void 0,
-      rating: getText(el, config.selectorRating) || void 0,
-      category: getText(el, config.selectorCategory) || void 0,
-      images: config.selectorImage ? getAll(el, config.selectorImage) : void 0,
-      priceNumeric: parsePrice(price),
-      slug: url.split("/").filter(Boolean).pop()
-    };
-    products.push(product);
-  });
-  return products;
-}
-
-// src/observer.ts
-var RouteObserver = class {
-  constructor() {
-    this.callbacks = [];
-    this.current = window.location.href;
-    this.patchHistory();
-    window.addEventListener("popstate", () => this.notify());
-  }
-  patchHistory() {
-    const notify = () => this.notify();
-    const wrap = (original) => function(...args) {
-      original.apply(this, args);
-      notify();
-    };
-    history.pushState = wrap(history.pushState);
-    history.replaceState = wrap(history.replaceState);
-  }
-  notify() {
-    const next = window.location.href;
-    if (next !== this.current) {
-      this.current = next;
-      this.callbacks.forEach((cb) => cb(next));
-    }
-  }
-  onChange(cb) {
-    this.callbacks.push(cb);
-    return () => {
-      this.callbacks = this.callbacks.filter((fn) => fn !== cb);
-    };
-  }
-  destroy() {
-    this.callbacks = [];
-  }
 };
 
 // src/client.ts
 var HuskelClient = class {
   constructor(config) {
-    this.config = config;
-    this.api = new HuskelAPI(config.apiUrl, config.siteId);
-  }
-  /** Push selectors config to backend once (idempotent) */
-  async configure() {
-    await this.api.pushConfig(this.config.selectors);
-  }
-  /** Scrape current DOM and ingest all products on the page */
-  async ingestCurrentPage() {
-    const products = extractProducts(__spreadValues({
-      siteId: this.config.siteId
-    }, this.config.selectors));
-    if (products.length === 0) return [];
-    await this.api.ingestBatch(products);
-    return products;
-  }
-  /** Start watching route changes and auto-ingesting */
-  start() {
-    if (!this.config.autoIngest) return;
-    this.observer = new RouteObserver();
-    this.unsubscribe = this.observer.onChange(() => {
-      var _a;
-      clearTimeout(this.debounceTimer);
-      this.debounceTimer = setTimeout(() => {
-        this.ingestCurrentPage().catch(console.error);
-      }, (_a = this.config.debounceMs) != null ? _a : 600);
-    });
-    this.ingestCurrentPage().catch(console.error);
-  }
-  stop() {
-    var _a, _b;
-    (_a = this.unsubscribe) == null ? void 0 : _a.call(this);
-    (_b = this.observer) == null ? void 0 : _b.destroy();
-    clearTimeout(this.debounceTimer);
+    this.api = new HuskelAPI(config.apiUrl, config.siteId, config.apiToken);
   }
 };
 var instance = null;
@@ -187,15 +86,25 @@ function getHuskelClient() {
   return instance;
 }
 
+// src/hooks/useHuskel.ts
+import { useRef } from "react";
+function useHuskel(config) {
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = initHuskel(config);
+  }
+  return clientRef.current;
+}
+
 // src/hooks/useSearch.ts
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef as useRef2 } from "react";
 function useSearch() {
   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const abortRef = useRef(null);
+  const abortRef = useRef2(null);
   const search = useCallback(async (query, limit = 10) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!query.trim()) {
       setResults([]);
       return;
@@ -205,13 +114,10 @@ function useSearch() {
     setLoading(true);
     setError(null);
     try {
-      const client = getHuskelClient();
-      const res = await client.api.search(query, limit);
+      const res = await getHuskelClient().api.search(query, limit);
       setResults((_b = res.results) != null ? _b : []);
     } catch (e) {
-      if (e.name !== "AbortError") {
-        setError(e.message);
-      }
+      setError((_c = e.message) != null ? _c : "Search failed");
     } finally {
       setLoading(false);
     }
@@ -223,51 +129,53 @@ function useSearch() {
   return { results, loading, error, search, clear };
 }
 
-// src/hooks/useHuskel.ts
-import { useEffect, useRef as useRef2 } from "react";
-function useHuskel(options) {
-  const clientRef = useRef2(null);
-  useEffect(() => {
+// src/hooks/useIngest.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+function useIngest() {
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const ingest = useCallback2(async (product) => {
     var _a;
-    const client = initHuskel(options);
-    clientRef.current = client;
-    client.configure().then(() => {
-      client.start();
-    }).catch((_a = options.onError) != null ? _a : console.error);
-    return () => client.stop();
+    setLoading(true);
+    setError(null);
+    try {
+      await getHuskelClient().api.ingest(product);
+    } catch (e) {
+      setError((_a = e.message) != null ? _a : "Ingest failed");
+    } finally {
+      setLoading(false);
+    }
   }, []);
-  return clientRef.current;
+  const ingestBatch = useCallback2(async (products) => {
+    var _a;
+    if (!products.length) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await getHuskelClient().api.ingestBatch(products);
+    } catch (e) {
+      setError((_a = e.message) != null ? _a : "Batch ingest failed");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { ingest, ingestBatch, loading, error };
 }
 
 // src/components/SearchBar.tsx
-import { useState as useState2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useState as useState3, useEffect as useEffect2, useRef as useRef3 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_STYLES = `
-  .huskel-search-wrap { position: relative; width: 100%; font-family: inherit; }
-  .huskel-search-input {
-    width: 100%; padding: 10px 16px; font-size: 15px;
-    border: 1.5px solid #e2e2e2; border-radius: 8px;
-    outline: none; box-sizing: border-box; background: #fff;
-    transition: border-color 0.2s;
-  }
-  .huskel-search-input:focus { border-color: #f47c3c; }
-  .huskel-search-dropdown {
-    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
-    background: #fff; border: 1px solid #e2e2e2; border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.10); z-index: 9999;
-    max-height: 360px; overflow-y: auto;
-  }
-  .huskel-search-item {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 14px; cursor: pointer; transition: background 0.15s;
-  }
-  .huskel-search-item:hover { background: #faf5f1; }
-  .huskel-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
-  .huskel-search-item-info { flex: 1; min-width: 0; }
-  .huskel-search-item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .huskel-search-item-price { font-size: 13px; color: #f47c3c; margin-top: 2px; }
-  .huskel-search-empty { padding: 16px; text-align: center; color: #888; font-size: 14px; }
-  .huskel-search-loading { padding: 16px; text-align: center; color: #aaa; font-size: 13px; }
+var S = `
+  .hsk-wrap{position:relative;width:100%;font-family:inherit}
+  .hsk-input{width:100%;padding:10px 16px;font-size:15px;border:1.5px solid #e2e2e2;border-radius:8px;outline:none;box-sizing:border-box;background:#fff;transition:border-color .2s}
+  .hsk-input:focus{border-color:#f47c3c}
+  .hsk-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:9999;max-height:360px;overflow-y:auto}
+  .hsk-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s}
+  .hsk-item:hover{background:#faf5f1}
+  .hsk-item img{width:40px;height:40px;object-fit:cover;border-radius:4px}
+  .hsk-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .hsk-item-price{font-size:13px;color:#f47c3c;margin-top:2px}
+  .hsk-msg{padding:16px;text-align:center;font-size:14px;color:#888}
 `;
 function SearchBar({
   placeholder = "Search for what you want \u2014 how you want",
@@ -275,31 +183,31 @@ function SearchBar({
   debounceMs = 300,
   onSelect,
   className,
+  inputClassName,
+  dropdownClassName,
   renderResult
 }) {
-  const [query, setQuery] = useState2("");
-  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState3("");
+  const [open, setOpen] = useState3(false);
   const { results, loading, search, clear } = useSearch();
-  const timerRef = useRef3();
-  const wrapRef = useRef3(null);
+  const timer = useRef3();
+  const wrap = useRef3(null);
   useEffect2(() => {
-    clearTimeout(timerRef.current);
+    clearTimeout(timer.current);
     if (!query.trim()) {
       clear();
       setOpen(false);
       return;
     }
-    timerRef.current = setTimeout(() => {
+    timer.current = setTimeout(() => {
       search(query, limit);
       setOpen(true);
     }, debounceMs);
-    return () => clearTimeout(timerRef.current);
+    return () => clearTimeout(timer.current);
   }, [query]);
   useEffect2(() => {
     const handler = (e) => {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
-        setOpen(false);
-      }
+      if (wrap.current && !wrap.current.contains(e.target)) setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -310,12 +218,12 @@ function SearchBar({
     onSelect == null ? void 0 : onSelect(r);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: DEFAULT_STYLES }),
-    /* @__PURE__ */ jsxs("div", { className: `huskel-search-wrap ${className != null ? className : ""}`, ref: wrapRef, children: [
+    /* @__PURE__ */ jsx("style", { children: S }),
+    /* @__PURE__ */ jsxs("div", { className: `hsk-wrap ${className != null ? className : ""}`, ref: wrap, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "huskel-search-input",
+          className: `hsk-input ${inputClassName != null ? inputClassName : ""}`,
           type: "text",
           value: query,
           placeholder,
@@ -323,9 +231,9 @@ function SearchBar({
           onFocus: () => results.length && setOpen(true)
         }
       ),
-      open && /* @__PURE__ */ jsxs("div", { className: "huskel-search-dropdown", children: [
-        loading && /* @__PURE__ */ jsx("div", { className: "huskel-search-loading", children: "Searching\u2026" }),
-        !loading && results.length === 0 && /* @__PURE__ */ jsxs("div", { className: "huskel-search-empty", children: [
+      open && /* @__PURE__ */ jsxs("div", { className: `hsk-drop ${dropdownClassName != null ? dropdownClassName : ""}`, children: [
+        loading && /* @__PURE__ */ jsx("div", { className: "hsk-msg", children: "Searching\u2026" }),
+        !loading && results.length === 0 && /* @__PURE__ */ jsxs("div", { className: "hsk-msg", children: [
           'No results for "',
           query,
           '"'
@@ -333,11 +241,11 @@ function SearchBar({
         results.map(
           (r) => {
             var _a, _b;
-            return renderResult ? /* @__PURE__ */ jsx("div", { onClick: () => handleSelect(r), children: renderResult(r) }, r.id) : /* @__PURE__ */ jsxs("div", { className: "huskel-search-item", onClick: () => handleSelect(r), children: [
+            return renderResult ? /* @__PURE__ */ jsx("div", { onClick: () => handleSelect(r), children: renderResult(r) }, r.id) : /* @__PURE__ */ jsxs("div", { className: "hsk-item", onClick: () => handleSelect(r), children: [
               ((_a = r.product.images) == null ? void 0 : _a[0]) && /* @__PURE__ */ jsx("img", { src: r.product.images[0], alt: r.product.name }),
-              /* @__PURE__ */ jsxs("div", { className: "huskel-search-item-info", children: [
-                /* @__PURE__ */ jsx("div", { className: "huskel-search-item-name", children: r.product.name }),
-                /* @__PURE__ */ jsxs("div", { className: "huskel-search-item-price", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "hsk-item-name", children: r.product.name }),
+                /* @__PURE__ */ jsxs("div", { className: "hsk-item-price", children: [
                   (_b = r.product.currency) != null ? _b : "KES",
                   " ",
                   r.product.price
@@ -352,27 +260,19 @@ function SearchBar({
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var STYLES = `
-  .huskel-sparkle-btn {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 4px 10px; font-size: 12px; font-weight: 600;
-    background: #f47c3c; color: #fff; border: none;
-    border-radius: 20px; cursor: pointer; letter-spacing: 0.02em;
-    transition: opacity 0.2s, transform 0.15s;
-  }
-  .huskel-sparkle-btn:hover { opacity: 0.88; transform: scale(1.04); }
-  .huskel-sparkle-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-  .huskel-sparkle-icon { font-size: 13px; }
+var S2 = `
+  .hsk-sparkle{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;background:#f47c3c;color:#fff;border:none;border-radius:20px;cursor:pointer;transition:opacity .2s,transform .15s}
+  .hsk-sparkle:hover{opacity:.88;transform:scale(1.04)}
+  .hsk-sparkle:disabled{opacity:.5;cursor:not-allowed}
 `;
-function Sparkle({ productName, className, onResult }) {
-  const [loading, setLoading] = useState3(false);
+function Sparkle({ productName, limit = 5, onResult, className }) {
+  const [loading, setLoading] = useState4(false);
   const handleClick = async () => {
     setLoading(true);
     try {
-      const client = getHuskelClient();
-      const res = await client.api.search(productName, 5);
+      const res = await getHuskelClient().api.search(productName, limit);
       onResult == null ? void 0 : onResult(res.results);
     } catch (e) {
       console.error("[Huskel Sparkle]", e);
@@ -381,20 +281,11 @@ function Sparkle({ productName, className, onResult }) {
     }
   };
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("style", { children: STYLES }),
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        className: `huskel-sparkle-btn ${className != null ? className : ""}`,
-        onClick: handleClick,
-        disabled: loading,
-        title: "Find similar with AI",
-        children: [
-          /* @__PURE__ */ jsx2("span", { className: "huskel-sparkle-icon", children: "\u2726" }),
-          loading ? "Finding\u2026" : "Similar"
-        ]
-      }
-    )
+    /* @__PURE__ */ jsx2("style", { children: S2 }),
+    /* @__PURE__ */ jsxs2("button", { className: `hsk-sparkle ${className != null ? className : ""}`, onClick: handleClick, disabled: loading, children: [
+      "\u2726 ",
+      loading ? "Finding\u2026" : "Similar"
+    ] })
   ] });
 }
 export {
@@ -405,5 +296,6 @@ export {
   getHuskelClient,
   initHuskel,
   useHuskel,
+  useIngest,
   useSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huskel/sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Huskel AI-powered search SDK for SPAs",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",