bonsai-search 3.1.1 → 3.1.3

package/README.md

@@ -1,6 +1,6 @@
-# Bonsai Search SDK
+# Bonsai Search
 
-AI-powered search for e-commerce. Drop-in web component or JavaScript SDK for adding semantic product search to any website.
+AI-powered search web components for e-commerce. Drop-in `<bonsai-search>` and `<bonsai-searchbar>` custom elements for adding semantic product search to any website.
 
 ## Installation
 
@@ -10,30 +10,39 @@ AI-powered search for e-commerce. Drop-in web component or JavaScript SDK for ad
 npm install bonsai-search
 ```
 
-### CDN (Web Component)
+```javascript
+// Registers <bonsai-search> custom element
+import "bonsai-search";
 
-```html
-<script src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.1.1.js"></script>
+// Registers <bonsai-searchbar> custom element
+import "bonsai-search/searchbar";
 ```
 
-### CDN (Searchbar Only)
+### CDN
 
 ```html
-<script src="https://assets.hibonsai.com/sdk/bonsai-searchbar-webcomponent-3.1.1.js"></script>
+<!-- Full search component -->
+<script src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.1.2.js"></script>
+
+<!-- Searchbar only -->
+<script src="https://assets.hibonsai.com/sdk/bonsai-searchbar-webcomponent-3.1.2.js"></script>
 ```
 
 ## Usage
 
-### Web Component
+### `<bonsai-search>`
+
+Full search experience with input, suggestions, AI-powered results, and product cards.
 
 ```html
 <bonsai-search
   api-key="your-api-key"
-  base-url="https://api.hibonsai.com/rest/search/v2/"
+  base-url="https://api.hibonsai.com/rest/search/v3/"
   placeholder="Describe what you're looking for..."
   suggestions='["suggestion 1", "suggestion 2"]'
   max-results="20"
   render-price
+  markdown
   brand-color="#0A5B3B"
   text-color="#303030"
   muted-color="#9CA3AF"
@@ -46,40 +55,27 @@ npm install bonsai-search
 </bonsai-search>
 ```
 
-### JavaScript SDK
+### `<bonsai-searchbar>`
 
-```javascript
-import { BonsaiSearch } from "bonsai-search";
-
-const search = new BonsaiSearch({
-  container: document.getElementById("search-container"),
-  apiKey: "your-api-key",
-  baseUrl: "https://api.hibonsai.com/rest/search/v2/",
-  placeholder: "Describe what you're looking for...",
-  suggestions: ["suggestion 1", "suggestion 2"],
-  onSearch: (query) => {
-    console.log("Searching for:", query);
-  },
-  onResults: (results) => {
-    console.log("Found results:", results);
-  },
-  onAi: (data) => {
-    console.log("AI results:", data);
-  },
-  onError: (error) => {
-    console.error("Search error:", error);
-  },
-});
+Lightweight search input with suggestions dropdown. Use this when you want to handle results rendering yourself.
+
+```html
+<bonsai-searchbar
+  api-key="your-api-key"
+  base-url="https://api.hibonsai.com/rest/search/v3/"
+  placeholder="Search products..."
+  suggestions='["suggestion 1", "suggestion 2"]'>
+</bonsai-searchbar>
 ```
 
 ## Configuration
 
-### Web Component Attributes
+### Attributes
 
 | Attribute | Description | Default |
 |-----------|-------------|---------|
-| `api-key` | **(Required)** API key for authentication | — |
-| `base-url` | API endpoint URL | `https://api.hibonsai.com/rest/search/v2/` |
+| `api-key` | **(Required)** API key for authentication | -- |
+| `base-url` | API endpoint URL | `https://api.hibonsai.com/rest/search/v3/` |
 | `placeholder` | Search input placeholder text | `"Describe what you're looking for..."` |
 | `suggestions` | JSON array of suggestion strings | `[]` |
 | `max-results` | Maximum number of results to display | `50` |
@@ -92,7 +88,7 @@ const search = new BonsaiSearch({
 | `items-label` | Label for items when no recommendations | `"Items"` |
 | `theme` | Color theme: `"light"`, `"dark"`, or `"auto"` | `"light"` |
 
-### Theming Attributes
+### Theming
 
 | Attribute | Description |
 |-----------|-------------|
@@ -110,37 +106,9 @@ const search = new BonsaiSearch({
 | `canvas-color` | Canvas/page background |
 | `results-columns` | Number of grid columns for results |
 
-### JavaScript SDK Options
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `container` | `HTMLElement` | **(Required)** Container element for the search UI |
-| `apiKey` | `string` | **(Required)** API key for authentication |
-| `baseUrl` | `string` | API endpoint URL |
-| `placeholder` | `string` | Search input placeholder text |
-| `suggestions` | `string[]` | Array of search suggestions |
-| `debounceMs` | `number` | Debounce delay for search-as-you-type (0 = disabled) |
-| `maxResults` | `number` | Maximum number of results |
-| `timeoutMs` | `number` | Request timeout in milliseconds |
-| `renderPrice` | `boolean` | Show product prices |
-| `imageObjectFit` | `"cover" \| "contain"` | Image fit mode |
-| `imageHostname` | `string` | CDN hostname for image srcset generation |
-| `generateSrcSet` | `boolean` | Generate srcset attributes for images |
-| `srcSetSizes` | `SrcSetSize[]` | Sizes for srcset generation |
-| `markdown` | `boolean` | Enable markdown in recommendations |
-| `featuredItemsLabel` | `string` | Label for featured items section |
-| `moreItemsLabel` | `string` | Label for more items section |
-| `itemsLabel` | `string` | Label for items section |
-| `onSearch` | `(query: string) => void` | Callback when search is initiated |
-| `onResults` | `(results: SearchResult[]) => void` | Callback when initial results arrive |
-| `onAi` | `(data: AiEventData) => void` | Callback when AI-scored results arrive |
-| `onError` | `(error: Error) => void` | Callback on error |
-| `onImg` | `(result, img, wrapper, sdk) => void` | Callback to customize image elements |
-| `onPrice` | `(result, price, parent?) => string` | Callback to format prices |
-
-### Events (Web Component)
-
-The web component emits custom events that bubble and are composed:
+### Events
+
+The web components emit custom events that bubble and are composed:
 
 ```javascript
 const el = document.querySelector("bonsai-search");
@@ -169,7 +137,8 @@ npm install
 npm run dev               # Watch mode (SDK)
 npm run dev:webcomponents # Dev server (web components)
 npm run build             # Build SDK
-npm run build:webcomponents # Build web components
+npm run build:webcomponents       # Build web components (IIFE for CDN)
+npm run build:webcomponents:esm   # Build web components (ESM for npm)
 npm run test              # Run tests
 npm run typecheck         # Type check
 ```

package/dist/{bonsai-sdk-3.1.1.js → bonsai-sdk-3.1.3.js}

@@ -911,7 +911,7 @@
 
 //#endregion
 //#region src/index.ts
-	const VERSION = "3.1.1";
+	const VERSION = "3.1.3";
 	const ICONS = {
 		search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <circle cx="11" cy="11" r="8"></circle>