bonsai-search 3.0.8

package/dist/index.js

@@ -0,0 +1,1693 @@
+import { marked } from "marked";
+
+//#region sdk.css?raw
+var sdk_default = "/* Bonsai Search SDK Styles\n * Ported from React prototype design system\n * All classes prefixed with bonsai- for isolation\n */\n\n/* ============================================================================\n * CSS VARIABLES - Design Tokens\n * ============================================================================ */\n:root {\n  /* Colors - Default theme */\n  --bonsai-brand-color: #0a5b3b;\n  --bonsai-text-color: #303030;\n  --bonsai-suggestions-text-color: #303030;\n  --bonsai-input-text-color: #303030;\n  --bonsai-results-text-color: #303030;\n  --bonsai-card-text-color: #303030;\n  --bonsai-muted-color: #9ca3af;\n  --bonsai-input-bg: #f5f5f5;\n  --bonsai-card-bg: #f5f5f5;\n  --bonsai-canvas-color: #fafafa;\n  --bonsai-surface-color: #ffffff;\n  --bonsai-border-color: rgba(0, 0, 0, 0.06);\n  --bonsai-border-color-hover: rgba(0, 0, 0, 0.12);\n  --bonsai-hover-bg: rgba(0, 0, 0, 0.04);\n  --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);\n  --bonsai-error-bg: rgba(220, 53, 69, 0.1);\n  --bonsai-error-color: #c82333;\n\n  /* Spacing (4px base) */\n  --bonsai-space-1: 0.25rem;\n  /* 4px */\n  --bonsai-space-2: 0.5rem;\n  /* 8px */\n  --bonsai-space-3: 0.75rem;\n  /* 12px */\n  --bonsai-space-4: 1rem;\n  /* 16px */\n  --bonsai-space-5: 1.25rem;\n  /* 20px */\n  --bonsai-space-6: 1.5rem;\n  /* 24px */\n\n  /* Typography */\n  --bonsai-font-heading: system-ui, -apple-system, sans-serif;\n  --bonsai-font-body: system-ui, -apple-system, sans-serif;\n  --bonsai-font-mono: ui-monospace, monospace;\n  --bonsai-font-size-xs: 0.75rem;\n  /* 12px */\n  --bonsai-font-size-sm: 0.875rem;\n  /* 14px */\n  --bonsai-font-size-base: 1rem;\n  /* 16px */\n  --bonsai-font-size-lg: 1.125rem;\n  /* 18px */\n  --bonsai-font-size-xl: 1.25rem;\n  /* 20px */\n\n  /* Border Radius */\n  --bonsai-radius-none: 0;\n  --bonsai-radius-sm: 0.25rem;\n  /* 4px */\n  --bonsai-radius-md: 0.375rem;\n  /* 6px */\n  --bonsai-radius-lg: 0.5rem;\n  /* 8px */\n  --bonsai-radius-xl: 0.75rem;\n  /* 12px */\n  --bonsai-radius-full: 9999px;\n\n  /* Animation */\n  --bonsai-duration-fast: 150ms;\n  --bonsai-duration-base: 200ms;\n  --bonsai-duration-slow: 300ms;\n  --bonsai-easing: cubic-bezier(0, 0, 0.2, 1);\n\n  /* Shadows */\n  --bonsai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --bonsai-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --bonsai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n\n  /* Component Sizes */\n  --bonsai-search-min-height: 3.5rem;\n  /* 56px */\n  --bonsai-search-max-width: 42rem;\n  /* 672px */\n  --bonsai-icon-size: 1.25rem;\n  /* 20px */\n  --bonsai-icon-size-sm: 1rem;\n  /* 16px */\n}\n\n:host([data-theme=\"dark\"]) {\n  --bonsai-text-color: #e5e7eb;\n  --bonsai-suggestions-text-color: #e5e7eb;\n  --bonsai-input-text-color: #e5e7eb;\n  --bonsai-results-text-color: #e5e7eb;\n  --bonsai-card-text-color: #e5e7eb;\n  --bonsai-muted-color: #a1a1aa;\n  --bonsai-input-bg: #1f2229;\n  --bonsai-card-bg: #1f2229;\n  --bonsai-canvas-color: #0f1115;\n  --bonsai-surface-color: #181a20;\n  --bonsai-border-color: rgba(255, 255, 255, 0.08);\n  --bonsai-border-color-hover: rgba(255, 255, 255, 0.14);\n  --bonsai-hover-bg: rgba(255, 255, 255, 0.06);\n  --bonsai-suggestions-hover-bg: rgba(255, 255, 255, 0.06);\n  --bonsai-error-bg: rgba(248, 113, 113, 0.15);\n  --bonsai-error-color: #fca5a5;\n  --bonsai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);\n  --bonsai-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.5);\n  --bonsai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.55);\n}\n\n/* ============================================================================\n * BASE CONTAINER\n * ============================================================================ */\n.bonsai-search-container {\n  max-width: var(--bonsai-search-max-width);\n  font-family: var(--bonsai-font-heading);\n  box-sizing: border-box;\n}\n\n.bonsai-search-container *,\n.bonsai-search-container *::before,\n.bonsai-search-container *::after {\n  box-sizing: border-box;\n}\n\n.bonsai-search-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bonsai-space-1);\n  position: relative;\n}\n\n/* ============================================================================\n * SEARCH INPUT CONTAINER\n * ============================================================================ */\n.bonsai-search-bar {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  min-height: var(--bonsai-search-min-height);\n  background-color: var(--bonsai-input-bg);\n  border-radius: var(--bonsai-radius-lg);\n  transition: box-shadow var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-search-bar.bonsai-focused {\n  box-shadow: 0 0 0 2px var(--bonsai-brand-color);\n}\n\n/* ============================================================================\n * SEARCH ICON (Left side)\n * ============================================================================ */\n.bonsai-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: var(--bonsai-space-4);\n  padding-right: var(--bonsai-space-2);\n  color: var(--bonsai-input-text-color, var(--bonsai-text-color));\n  transition: color var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-search-bar:hover .bonsai-search-icon,\n.bonsai-search-bar.bonsai-focused .bonsai-search-icon {\n  color: var(--bonsai-input-text-color, var(--bonsai-text-color));\n}\n\n.bonsai-search-icon svg {\n  width: var(--bonsai-icon-size);\n  height: var(--bonsai-icon-size);\n  stroke: currentColor;\n  stroke-width: 2;\n  fill: none;\n}\n\n/* ============================================================================\n * INPUT FIELD\n * ============================================================================ */\n.bonsai-search-input {\n  flex: 1;\n  min-width: 0;\n  padding: var(--bonsai-space-4) var(--bonsai-space-4) var(--bonsai-space-4) 0;\n  border: none;\n  background: transparent;\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-base);\n  color: var(--bonsai-input-text-color, var(--bonsai-text-color));\n  outline: none;\n}\n\n.bonsai-search-input::placeholder {\n  color: var(--bonsai-muted-color);\n}\n\n.bonsai-search-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n/* Webkit search clear button styling */\n.bonsai-search-input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  cursor: pointer;\n  background-color: var(--bonsai-muted-color);\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E\");\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E\");\n  mask-size: contain;\n  -webkit-mask-size: contain;\n  mask-repeat: no-repeat;\n  -webkit-mask-repeat: no-repeat;\n  mask-position: center;\n  -webkit-mask-position: center;\n  opacity: 0.7;\n  transition: opacity var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-search-input::-webkit-search-cancel-button:hover {\n  opacity: 1;\n}\n\n/* ============================================================================\n * ACTION BUTTONS AREA (Right side)\n * ============================================================================ */\n.bonsai-search-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bonsai-space-2);\n  padding-right: var(--bonsai-space-3);\n  flex: 0 0 auto;\n  min-width: max-content;\n}\n\n/* Submit Button */\n.bonsai-submit-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: var(--bonsai-space-2);\n  border: none;\n  border-radius: var(--bonsai-radius-lg);\n  background-color: var(--bonsai-brand-color);\n  cursor: pointer;\n  touch-action: manipulation;\n  flex-shrink: 0;\n  transition:\n    opacity var(--bonsai-duration-fast) var(--bonsai-easing),\n    transform var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-submit-btn.bonsai-visible {\n  display: flex;\n}\n\n.bonsai-submit-btn:hover {\n  opacity: 0.8;\n}\n\n.bonsai-submit-btn:active {\n  transform: scale(0.95);\n}\n\n.bonsai-submit-btn svg {\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  stroke: white;\n  stroke-width: 2;\n  fill: none;\n}\n\n/* Loading State */\n.bonsai-loading-state {\n  display: none;\n  align-items: center;\n  gap: var(--bonsai-space-2);\n  flex-shrink: 0;\n}\n\n.bonsai-loading-state.bonsai-visible {\n  display: flex;\n}\n\n.bonsai-loading-text {\n  position: relative;\n  height: 1.25rem;\n  overflow: hidden;\n  min-width: 5rem;\n  text-align: right;\n}\n\n.bonsai-loading-text-inner {\n  display: flex;\n  flex-direction: column;\n  transition: transform var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-loading-text span {\n  display: block;\n  height: 1.25rem;\n  line-height: 1.25rem;\n  font-family: var(--bonsai-font-mono);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-muted-color);\n  white-space: nowrap;\n}\n\n/* Spinner */\n.bonsai-spinner {\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  animation: bonsai-spin 1s linear infinite;\n  transform-origin: center;\n}\n\n.bonsai-spinner svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  transform-origin: center;\n}\n\n.bonsai-spinner-track {\n  stroke: var(--bonsai-muted-color);\n  stroke-opacity: 0.25;\n}\n\n.bonsai-spinner-fill {\n  fill: var(--bonsai-brand-color);\n}\n\n@keyframes bonsai-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Done State */\n.bonsai-done-state {\n  display: none;\n  align-items: center;\n  gap: var(--bonsai-space-2);\n  flex-shrink: 0;\n}\n\n.bonsai-done-state.bonsai-visible {\n  display: flex;\n}\n\n.bonsai-done-text {\n  font-family: var(--bonsai-font-mono);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-muted-color);\n}\n\n.bonsai-done-icon svg {\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  stroke: var(--bonsai-text-color);\n  stroke-width: 2;\n  fill: none;\n}\n\n/* Reset/Retry Button */\n.bonsai-reset-btn {\n  display: none;\n  align-items: center;\n  gap: var(--bonsai-space-2);\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  touch-action: manipulation;\n  flex-shrink: 0;\n  transition: opacity var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-reset-btn.bonsai-visible {\n  display: flex;\n}\n\n.bonsai-reset-btn:hover {\n  opacity: 0.7;\n}\n\n.bonsai-reset-text {\n  font-family: var(--bonsai-font-mono);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-muted-color);\n}\n\n.bonsai-reset-icon {\n  transition: transform var(--bonsai-duration-slow) var(--bonsai-easing);\n  transform-origin: center;\n}\n\n.bonsai-reset-btn:hover .bonsai-reset-icon {\n  transform: rotate(-180deg);\n}\n\n.bonsai-reset-icon svg {\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  stroke: var(--bonsai-muted-color);\n  stroke-width: 2;\n  fill: none;\n  transform-origin: center;\n  display: block;\n}\n\n/* ============================================================================\n * SUGGESTIONS DROPDOWN\n * ============================================================================ */\n.bonsai-suggestions {\n  position: absolute;\n  top: calc(100% + var(--bonsai-space-1));\n  left: 0;\n  right: 0;\n  background-color: var(--bonsai-input-bg);\n  border-radius: var(--bonsai-radius-lg);\n  box-shadow: var(--bonsai-shadow-lg);\n  overflow: hidden;\n  z-index: 10;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition:\n    opacity var(--bonsai-duration-fast) var(--bonsai-easing),\n    transform var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-suggestions.bonsai-visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.bonsai-suggestion-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--bonsai-space-2) var(--bonsai-space-4);\n  border: none;\n  background: transparent;\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-suggestions-text-color, var(--bonsai-text-color));\n  text-align: left;\n  cursor: pointer;\n  transition: background-color var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-suggestion-item:hover {\n  background-color: var(--bonsai-suggestions-hover-bg, var(--bonsai-hover-bg));\n}\n\n.bonsai-suggestion-arrow {\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--bonsai-duration-fast) var(--bonsai-easing),\n    visibility 0s linear var(--bonsai-duration-fast);\n}\n\n.bonsai-suggestion-item:hover .bonsai-suggestion-arrow {\n  opacity: 1;\n  visibility: visible;\n  transition-delay: 0s;\n}\n\n.bonsai-suggestion-arrow svg {\n  width: var(--bonsai-icon-size-sm);\n  height: var(--bonsai-icon-size-sm);\n  stroke: var(--bonsai-muted-color);\n  stroke-width: 2;\n  fill: none;\n}\n\n/* ============================================================================\n * POWERED BY BRANDING\n * ============================================================================ */\n.bonsai-powered-by {\n  position: relative;\n  z-index: 1;\n  height: 1.5rem;\n  margin-top: var(--bonsai-space-1);\n  text-align: right;\n  font-family: var(--bonsai-font-mono);\n  font-size: var(--bonsai-font-size-xs);\n  color: var(--bonsai-muted-color);\n  opacity: 1;\n  transition: opacity var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-powered-by.bonsai-hidden {\n  opacity: 0;\n}\n\n.bonsai-powered-by a {\n  color: var(--bonsai-brand-color);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  transition: gap var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-powered-by a:hover {\n  gap: var(--bonsai-space-1);\n}\n\n.bonsai-powered-by-dot {\n  display: inline-block;\n  width: 0;\n  height: 0.5rem;\n  border-radius: var(--bonsai-radius-full);\n  background-color: var(--bonsai-brand-color);\n  transform: scale(0);\n  transition:\n    width var(--bonsai-duration-base) var(--bonsai-easing),\n    transform var(--bonsai-duration-base) var(--bonsai-easing);\n}\n\n.bonsai-powered-by a:hover .bonsai-powered-by-dot {\n  width: 0.5rem;\n  transform: scale(1);\n}\n\n/* ============================================================================\n * RESULTS SECTION\n * ============================================================================ */\n.bonsai-results {\n  margin-top: var(--bonsai-space-2);\n  padding: var(--bonsai-space-4);\n  opacity: 0;\n  transform: translateY(20px);\n  transition:\n    opacity var(--bonsai-duration-slow) var(--bonsai-easing),\n    transform var(--bonsai-duration-slow) var(--bonsai-easing);\n}\n\n.bonsai-results.bonsai-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* AI Summary / Recommendation Text */\n.bonsai-summary {\n  margin-bottom: var(--bonsai-space-6);\n}\n\n.bonsai-summary-text {\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-base);\n  line-height: 1.6;\n  color: var(--bonsai-results-text-color, var(--bonsai-text-color));\n  margin: 0;\n}\n\n/* Markdown formatting within summary text */\n.bonsai-summary-text h1,\n.bonsai-summary-text h2,\n.bonsai-summary-text h3,\n.bonsai-summary-text h4,\n.bonsai-summary-text h5,\n.bonsai-summary-text h6 {\n  font-family: var(--bonsai-font-heading);\n  font-weight: 600;\n  color: var(--bonsai-results-text-color, var(--bonsai-text-color));\n  margin: var(--bonsai-space-4) 0 var(--bonsai-space-2) 0;\n  line-height: 1.25;\n}\n\n.bonsai-summary-text h1 {\n  font-size: var(--bonsai-font-size-xl);\n}\n\n.bonsai-summary-text h2 {\n  font-size: var(--bonsai-font-size-lg);\n}\n\n.bonsai-summary-text h3 {\n  font-size: var(--bonsai-font-size-base);\n}\n\n.bonsai-summary-text h4,\n.bonsai-summary-text h5,\n.bonsai-summary-text h6 {\n  font-size: var(--bonsai-font-size-sm);\n}\n\n.bonsai-summary-text p {\n  margin: var(--bonsai-space-2) 0;\n}\n\n.bonsai-summary-text p:first-child {\n  margin-top: 0;\n}\n\n.bonsai-summary-text p:last-child {\n  margin-bottom: 0;\n}\n\n.bonsai-summary-text strong {\n  font-weight: 600;\n  color: var(--bonsai-results-text-color, var(--bonsai-text-color));\n}\n\n.bonsai-summary-text em {\n  font-style: italic;\n}\n\n.bonsai-summary-text ul,\n.bonsai-summary-text ol {\n  margin: var(--bonsai-space-2) 0;\n  padding-left: var(--bonsai-space-5);\n}\n\n.bonsai-summary-text li {\n  margin: var(--bonsai-space-1) 0;\n}\n\n.bonsai-summary-text a {\n  color: var(--bonsai-brand-color);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.bonsai-summary-text a:hover {\n  text-decoration: none;\n}\n\n/* Results Header */\n.bonsai-results-header {\n  font-family: var(--bonsai-font-heading);\n  font-size: var(--bonsai-font-size-sm);\n  font-weight: 500;\n  color: var(--bonsai-muted-color);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0 0 var(--bonsai-space-3) 0;\n  /* border-top: 1px solid rgba(0, 0, 0, 0.06); */\n}\n\n/* Results Grid */\n.bonsai-results-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--bonsai-results-columns, 3), 1fr);\n  gap: var(--bonsai-space-4);\n}\n\n@media (max-width: 640px) {\n  .bonsai-results-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 400px) {\n  .bonsai-results-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* ============================================================================\n * RESULT CARD\n * ============================================================================ */\n.bonsai-result-card {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--bonsai-radius-md);\n  border: 1px solid var(--bonsai-border-color);\n  background-color: var(--bonsai-card-bg);\n  text-decoration: none;\n  cursor: pointer;\n  opacity: 0;\n  transform: translateY(10px);\n  transition:\n    opacity var(--bonsai-duration-base) var(--bonsai-easing),\n    transform var(--bonsai-duration-base) var(--bonsai-easing),\n    border-color var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-result-card.bonsai-animate-in {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.bonsai-result-card:hover {\n  border-color: var(--bonsai-border-color-hover);\n}\n\n/* Card Image */\n.bonsai-result-image {\n  width: 100%;\n  aspect-ratio: 1;\n  object-fit: var(--bonsai-image-object-fit, cover);\n  background-color: var(--bonsai-surface-color);\n}\n\n.bonsai-result-image-placeholder {\n  width: 100%;\n  aspect-ratio: 1;\n  background-color: var(--bonsai-surface-color);\n  opacity: 0.2;\n}\n\n/* Card Content */\n.bonsai-result-content {\n  flex: 1;\n  min-width: 0;\n  padding: var(--bonsai-space-3) var(--bonsai-space-4);\n  transition: background-color var(--bonsai-duration-fast) var(--bonsai-easing);\n}\n\n.bonsai-result-card:hover .bonsai-result-content {\n  background-color: var(--bonsai-hover-bg);\n}\n\n.bonsai-result-title {\n  font-family: var(--bonsai-font-heading);\n  font-size: var(--bonsai-font-size-base);\n  font-weight: 500;\n  line-height: 1.25;\n  color: var(--bonsai-card-text-color, var(--bonsai-text-color));\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.bonsai-result-price-container {\n  display: flex;\n  align-items: center;\n  gap: var(--bonsai-space-2);\n  margin: var(--bonsai-space-1) 0 0 0;\n}\n\n.bonsai-result-caption {\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  line-height: 1.5;\n  color: var(--bonsai-card-text-color, var(--bonsai-text-color));\n  opacity: 0.75;\n  margin: var(--bonsai-space-1) 0 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.bonsai-result-price {\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  font-weight: 600;\n  line-height: 1.5;\n  color: var(--bonsai-card-text-color, var(--bonsai-text-color));\n}\n\n.bonsai-result-compare-at {\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  line-height: 1.5;\n  color: var(--bonsai-card-text-color, var(--bonsai-text-color));\n  opacity: 0.5;\n  margin: 0;\n  text-decoration: line-through;\n}\n\n/* ============================================================================\n * RECOMMENDATIONS LOADING INDICATOR\n * ============================================================================ */\n.bonsai-recommendations-loading {\n  display: flex;\n  align-items: center;\n  gap: var(--bonsai-space-3);\n  padding: var(--bonsai-space-4);\n  margin-bottom: var(--bonsai-space-4);\n  background-color: var(--bonsai-input-bg);\n  border-radius: var(--bonsai-radius-lg);\n}\n\n.bonsai-recommendations-loading-spinner {\n  width: var(--bonsai-icon-size);\n  height: var(--bonsai-icon-size);\n  animation: bonsai-spin 1s linear infinite;\n}\n\n.bonsai-recommendations-loading-spinner svg {\n  width: 100%;\n  height: 100%;\n}\n\n.bonsai-recommendations-loading-text {\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-muted-color);\n}\n\n/* ============================================================================\n * RECOMMENDATION PRODUCTS (existing SDK feature)\n * ============================================================================ */\n.bonsai-recommendation-products {\n  margin-top: var(--bonsai-space-4);\n  padding-top: var(--bonsai-space-4);\n}\n\n.bonsai-recommendation-products-header {\n  font-family: var(--bonsai-font-heading);\n  font-size: var(--bonsai-font-size-xl);\n  font-weight: 500;\n  color: var(--bonsai-results-text-color, var(--bonsai-text-color));\n  margin: 0 0 var(--bonsai-space-3) 0;\n}\n\n/* ============================================================================\n * EMPTY & ERROR STATES\n * ============================================================================ */\n.bonsai-empty-state {\n  text-align: center;\n  padding: var(--bonsai-space-6);\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n  color: var(--bonsai-muted-color);\n}\n\n.bonsai-error {\n  padding: var(--bonsai-space-4);\n  border-radius: var(--bonsai-radius-lg);\n  background-color: var(--bonsai-error-bg);\n  color: var(--bonsai-error-color);\n  font-family: var(--bonsai-font-body);\n  font-size: var(--bonsai-font-size-sm);\n}\n\n/* ============================================================================\n * UTILITY CLASSES\n * ============================================================================ */\n.bonsai-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+//#endregion
+//#region src/bonsai-search-webcomponent.ts
+const SDK_CSS$1 = sdk_default || "";
+if (typeof window !== "undefined" && !SDK_CSS$1) console.warn("BonsaiSearch: CSS not loaded from file, will use fallback");
+/**
+* Web Component for Bonsai Search
+* Fully encapsulated with Shadow DOM, no inherited styles
+*
+* Usage:
+* <bonsai-search
+*   api-key="your-api-key"
+*   base-url="https://api.hibonsai.com/rest/search/v2/"
+*   placeholder="Describe what you're looking for..."
+*   suggestions='["suggestion 1", "suggestion 2"]'
+*   max-results="20"
+*   render-price
+*   brand-color="#0A5B3B"
+*   text-color="#303030"
+*   muted-color="#9CA3AF"
+*   input-bg="#f5f5f5"
+*   card-bg="#f5f5f5"
+*   image-object-fit="cover"
+*   featured-items-label="Featured Items"
+*   more-items-label="More Items"
+*   items-label="Items">
+* </bonsai-search>
+*/
+var BonsaiSearchElement = class extends HTMLElement {
+	search = null;
+	shadow;
+	container = null;
+	static get observedAttributes() {
+		return [
+			"api-key",
+			"base-url",
+			"placeholder",
+			"suggestions",
+			"max-results",
+			"timeout-ms",
+			"render-price",
+			"render-price-with-title",
+			"brand-color",
+			"text-color",
+			"suggestions-text-color",
+			"input-text-color",
+			"results-text-color",
+			"card-text-color",
+			"results-columns",
+			"suggestions-hover-bg",
+			"muted-color",
+			"input-bg",
+			"card-bg",
+			"surface-color",
+			"canvas-color",
+			"image-object-fit",
+			"markdown",
+			"theme",
+			"featured-items-label",
+			"more-items-label",
+			"items-label"
+		];
+	}
+	constructor() {
+		super();
+		this.shadow = this.attachShadow({ mode: "closed" });
+	}
+	connectedCallback() {
+		this.render();
+		this.initialize();
+	}
+	disconnectedCallback() {
+		this.search?.destroy();
+		this.search = null;
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue || !this.search) return;
+		if ([
+			"api-key",
+			"base-url",
+			"placeholder",
+			"suggestions",
+			"markdown",
+			"featured-items-label",
+			"more-items-label",
+			"items-label"
+		].includes(name)) {
+			this.disconnectedCallback();
+			this.connectedCallback();
+		} else this.updateStyles();
+	}
+	render() {
+		let css = SDK_CSS$1 || "";
+		if (!css || css.trim().length < 100) {
+			console.warn("BonsaiSearch: CSS not loaded, using fallback");
+			css = this.getDefaultCSS();
+		}
+		css = css.replace(/:root\s*\{/g, ":host {");
+		const style = document.createElement("style");
+		style.textContent = css;
+		this.shadow.appendChild(style);
+		this.container = document.createElement("div");
+		this.container.style.width = "100%";
+		this.shadow.appendChild(this.container);
+		this.updateStyles();
+	}
+	updateStyles() {
+		const themeAttr = this.getAttribute("theme") || "light";
+		const normalizedTheme = themeAttr === "dark" || themeAttr === "auto" ? themeAttr : "light";
+		const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+		const resolvedTheme = normalizedTheme === "auto" ? prefersDark ? "dark" : "light" : normalizedTheme;
+		this.setAttribute("data-theme", resolvedTheme);
+		const imageObjectFitAttr = this.getAttribute("image-object-fit");
+		const validObjectFit = imageObjectFitAttr === "contain" ? "contain" : imageObjectFitAttr === "cover" ? "cover" : null;
+		const setOrClear = (name, value) => {
+			if (value && value.trim().length > 0) this.style.setProperty(name, value);
+			else this.style.removeProperty(name);
+		};
+		setOrClear("--bonsai-brand-color", this.getAttribute("brand-color"));
+		setOrClear("--bonsai-text-color", this.getAttribute("text-color"));
+		const suggestionsTextColor = this.getAttribute("suggestions-text-color");
+		const inputTextColor = this.getAttribute("input-text-color");
+		setOrClear("--bonsai-suggestions-text-color", suggestionsTextColor || inputTextColor);
+		setOrClear("--bonsai-input-text-color", this.getAttribute("input-text-color"));
+		setOrClear("--bonsai-results-text-color", this.getAttribute("results-text-color"));
+		setOrClear("--bonsai-card-text-color", this.getAttribute("card-text-color"));
+		setOrClear("--bonsai-results-columns", this.getAttribute("results-columns"));
+		setOrClear("--bonsai-suggestions-hover-bg", this.getAttribute("suggestions-hover-bg"));
+		setOrClear("--bonsai-muted-color", this.getAttribute("muted-color"));
+		setOrClear("--bonsai-input-bg", this.getAttribute("input-bg"));
+		setOrClear("--bonsai-card-bg", this.getAttribute("card-bg"));
+		setOrClear("--bonsai-surface-color", this.getAttribute("surface-color"));
+		setOrClear("--bonsai-canvas-color", this.getAttribute("canvas-color"));
+		setOrClear("--bonsai-image-object-fit", validObjectFit);
+	}
+	initialize() {
+		if (!this.container) return;
+		const apiKey = this.getAttribute("api-key");
+		if (!apiKey) {
+			console.error("bonsai-search: api-key attribute is required");
+			return;
+		}
+		const suggestionsAttr = this.getAttribute("suggestions");
+		let suggestions = [];
+		if (suggestionsAttr) try {
+			suggestions = JSON.parse(suggestionsAttr);
+		} catch (e) {
+			console.warn("bonsai-search: Invalid suggestions JSON, using empty array");
+		}
+		const imageObjectFit = this.getAttribute("image-object-fit") === "contain" ? "contain" : "cover";
+		this.search = new BonsaiSearch({
+			container: this.container,
+			apiKey,
+			baseUrl: this.getAttribute("base-url") || void 0,
+			placeholder: this.getAttribute("placeholder") || "Describe what you're looking for...",
+			suggestions,
+			debounceMs: 0,
+			maxResults: this.getAttribute("max-results") ? parseInt(this.getAttribute("max-results")) : 50,
+			timeoutMs: this.getAttribute("timeout-ms") ? parseInt(this.getAttribute("timeout-ms")) : 3e4,
+			renderPrice: this.hasAttribute("render-price"),
+			renderPriceWithTitle: this.getAttribute("render-price-with-title") !== "false",
+			imageObjectFit,
+			markdown: this.hasAttribute("markdown"),
+			featuredItemsLabel: this.getAttribute("featured-items-label") || void 0,
+			moreItemsLabel: this.getAttribute("more-items-label") || void 0,
+			itemsLabel: this.getAttribute("items-label") || void 0,
+			onPrice: (result, price) => {
+				return price || "";
+			},
+			onSearch: (query) => {
+				this.dispatchEvent(new CustomEvent("search", {
+					detail: { query },
+					bubbles: true,
+					composed: true
+				}));
+			},
+			onResults: (results) => {
+				this.dispatchEvent(new CustomEvent("results", {
+					detail: { results },
+					bubbles: true,
+					composed: true
+				}));
+			},
+			onAi: (data) => {
+				this.dispatchEvent(new CustomEvent("ai", {
+					detail: data,
+					bubbles: true,
+					composed: true
+				}));
+			},
+			onError: (error) => {
+				this.dispatchEvent(new CustomEvent("error", {
+					detail: { error: error.message },
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+	}
+	setSuggestion(suggestion) {
+		this.search?.setSuggestion(suggestion);
+	}
+	clear() {
+		this.search?.clear();
+	}
+	focus() {
+		this.search?.focus();
+	}
+	getDefaultCSS() {
+		return `
+      :host {
+        display: block;
+        width: 100%;
+        --bonsai-brand-color: #0A5B3B;
+        --bonsai-text-color: #303030;
+        --bonsai-suggestions-text-color: #303030;
+        --bonsai-input-text-color: #303030;
+        --bonsai-results-text-color: #303030;
+        --bonsai-card-text-color: #303030;
+        --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);
+        --bonsai-muted-color: #9CA3AF;
+        --bonsai-input-bg: #f5f5f5;
+        --bonsai-card-bg: #f5f5f5;
+        --bonsai-surface-color: #ffffff;
+        --bonsai-canvas-color: #fafafa;
+        --bonsai-image-object-fit: cover;
+        --bonsai-border-color: rgba(0, 0, 0, 0.06);
+        --bonsai-border-color-hover: rgba(0, 0, 0, 0.12);
+        --bonsai-hover-bg: rgba(0, 0, 0, 0.04);
+        --bonsai-error-bg: rgba(220, 53, 69, 0.1);
+        --bonsai-error-color: #c82333;
+      }
+
+      :host([data-theme="dark"]) {
+        --bonsai-text-color: #e5e7eb;
+        --bonsai-suggestions-text-color: #e5e7eb;
+        --bonsai-input-text-color: #e5e7eb;
+        --bonsai-results-text-color: #e5e7eb;
+        --bonsai-card-text-color: #e5e7eb;
+        --bonsai-suggestions-hover-bg: rgba(255, 255, 255, 0.06);
+        --bonsai-muted-color: #a1a1aa;
+        --bonsai-input-bg: #1f2229;
+        --bonsai-card-bg: #1f2229;
+        --bonsai-surface-color: #181a20;
+        --bonsai-canvas-color: #0f1115;
+        --bonsai-border-color: rgba(255, 255, 255, 0.08);
+        --bonsai-border-color-hover: rgba(255, 255, 255, 0.14);
+        --bonsai-hover-bg: rgba(255, 255, 255, 0.06);
+        --bonsai-error-bg: rgba(248, 113, 113, 0.15);
+        --bonsai-error-color: #fca5a5;
+      }
+    `;
+	}
+};
+if (typeof window !== "undefined" && !customElements.get("bonsai-search")) customElements.define("bonsai-search", BonsaiSearchElement);
+
+//#endregion
+//#region src/searchbar.ts
+const VERSION$1 = "3.0.8";
+const ICONS$1 = {
+	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>
+    <path d="m21 21-4.35-4.35"></path>
+  </svg>`,
+	arrowRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14"></path>
+    <path d="m12 5 7 7-7 7"></path>
+  </svg>`,
+	close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M18 6L6 18"></path>
+    <path d="M6 6l12 12"></path>
+  </svg>`
+};
+const SEARCHBAR_STYLES = `
+  @keyframes bonsai-searchbar-fade-in {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes bonsai-searchbar-scale-in {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  .bonsai-searchbar-container {
+    margin: 24px auto;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+  .bonsai-searchbar-wrapper {
+    position: relative;
+  }
+  .bonsai-searchbar {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    position: relative;
+    z-index: 2;
+    background-color: var(--bonsai-input-bg);
+    border-radius: 8px;
+    transition: box-shadow 200ms ease-out;
+  }
+  .bonsai-searchbar.bonsai-searchbar-focused {
+    box-shadow: 0 0 0 2px var(--bonsai-brand-color);
+  }
+  .bonsai-searchbar-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 16px;
+    padding-right: 8px;
+    color: var(--bonsai-muted-color);
+    transition: color 200ms ease-out;
+  }
+  .bonsai-searchbar-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+  .bonsai-searchbar:hover .bonsai-searchbar-icon,
+  .bonsai-searchbar.bonsai-searchbar-focused .bonsai-searchbar-icon {
+    color: var(--bonsai-input-text-color, var(--bonsai-text-color));
+  }
+  .bonsai-searchbar-input {
+    flex: 1;
+    min-width: 0;
+    padding: 16px 16px 16px 0;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 16px;
+    color: var(--bonsai-input-text-color, var(--bonsai-text-color));
+    outline: none;
+  }
+  .bonsai-searchbar-input::placeholder {
+    color: var(--bonsai-muted-color);
+  }
+  .bonsai-searchbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 12px;
+    flex: 0 0 auto;
+    min-width: max-content;
+  }
+  .bonsai-searchbar-submit {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--bonsai-brand-color);
+    cursor: pointer;
+    touch-action: manipulation;
+    flex-shrink: 0;
+    color: white;
+    animation: bonsai-searchbar-scale-in 0.2s ease-out forwards;
+  }
+  .bonsai-searchbar-submit.bonsai-searchbar-visible {
+    display: flex;
+  }
+  .bonsai-searchbar-submit svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-close {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    touch-action: manipulation;
+    flex-shrink: 0;
+    color: var(--bonsai-muted-color);
+    transition: color 200ms ease-out;
+  }
+  .bonsai-searchbar-close.bonsai-searchbar-visible {
+    display: flex;
+  }
+  .bonsai-searchbar-close:hover {
+    color: var(--bonsai-text-color);
+  }
+  .bonsai-searchbar-close svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-suggestions {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background-color: var(--bonsai-input-bg);
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    overflow: hidden;
+    z-index: 10;
+    display: none;
+    animation: bonsai-searchbar-fade-in 0.2s ease-out forwards;
+  }
+  .bonsai-searchbar-suggestions.bonsai-searchbar-visible {
+    display: block;
+  }
+  .bonsai-searchbar-suggestion {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--bonsai-suggestions-text-color, var(--bonsai-text-color));
+    text-align: left;
+    background-color: var(--bonsai-input-bg);
+    cursor: pointer;
+    transition: background-color 150ms ease-out;
+  }
+  .bonsai-searchbar-suggestion:hover {
+    background-color: var(--bonsai-suggestions-hover-bg, rgba(0, 0, 0, 0.04));
+  }
+  .bonsai-searchbar-suggestion-arrow {
+    color: var(--bonsai-muted-color);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
+  }
+  .bonsai-searchbar-suggestion:hover .bonsai-searchbar-suggestion-arrow {
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 0s;
+  }
+  .bonsai-searchbar-suggestion-arrow svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-powered {
+    position: relative;
+    z-index: 1;
+    height: 24px;
+    margin-top: 4px;
+    text-align: right;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--bonsai-muted-color);
+  }
+  .bonsai-searchbar-powered-link {
+    color: var(--bonsai-brand-color);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    transition: gap 0.2s ease-out;
+  }
+  .bonsai-searchbar-powered-link:hover {
+    gap: 4px;
+  }
+  .bonsai-searchbar-powered-dot {
+    display: inline-block;
+    height: 8px;
+    width: 0;
+    border-radius: 50%;
+    background-color: var(--bonsai-brand-color);
+    transform: scale(0);
+    transition: transform 0.2s ease-out, width 0.2s ease-out;
+  }
+  .bonsai-searchbar-powered-link:hover .bonsai-searchbar-powered-dot {
+    transform: scale(1);
+    width: 8px;
+  }
+`;
+var BonsaiSearchBar = class {
+	config;
+	state = "default";
+	container;
+	searchBar = null;
+	searchInput = null;
+	submitBtn = null;
+	suggestionsDropdown = null;
+	query = "";
+	stylesInjected = false;
+	constructor(config) {
+		this.container = config.container;
+		const inputBg = config.inputBg || config.inputBackground || "#f5f5f5";
+		this.config = {
+			container: config.container,
+			searchPath: config.searchPath || "/ai-search",
+			placeholder: config.placeholder || "Describe what you're looking for...",
+			suggestions: config.suggestions || [],
+			brandColor: config.brandColor || "#0A5B3B",
+			textColor: config.textColor || "#303030",
+			suggestionsTextColor: config.suggestionsTextColor || "",
+			inputTextColor: config.inputTextColor || "",
+			mutedColor: config.mutedColor || "#9CA3AF",
+			inputBg,
+			inputBackground: inputBg,
+			inputOpacity: config.inputOpacity || "1",
+			suggestionsHoverBg: config.suggestionsHoverBg || "",
+			theme: config.theme || "light",
+			closeButton: config.closeButton || false,
+			onClose: config.onClose || (() => {}),
+			classAdditions: config.classAdditions || {}
+		};
+		this.validateConfig();
+		this.injectStyles();
+		this.render();
+		this.attachEventListeners();
+	}
+	/** Get the SDK version */
+	static get version() {
+		return VERSION$1;
+	}
+	/** Validate configuration */
+	validateConfig() {
+		if (!this.config.container) throw new Error("BonsaiSearchBar: container element is required");
+	}
+	/** Build class name string with any configured additional classes */
+	buildClassName(baseClass) {
+		const additions = this.config.classAdditions[baseClass];
+		if (additions && additions.length > 0) return `${baseClass} ${additions.join(" ")}`;
+		return baseClass;
+	}
+	/** Apply a shadow part name for external styling */
+	applyPart(el, part) {
+		el.setAttribute("part", part);
+	}
+	/** Inject CSS styles into the document */
+	injectStyles() {
+		if (this.stylesInjected) return;
+		if (document.getElementById("bonsai-searchbar-styles")) {
+			this.stylesInjected = true;
+			return;
+		}
+		const styleElement = document.createElement("style");
+		styleElement.id = "bonsai-searchbar-styles";
+		styleElement.textContent = SEARCHBAR_STYLES;
+		document.head.appendChild(styleElement);
+		this.stylesInjected = true;
+	}
+	/** Render the search bar UI */
+	render() {
+		this.container.innerHTML = "";
+		this.container.classList.add("bonsai-searchbar-container");
+		this.applyPart(this.container, "searchbar-container");
+		this.container.setAttribute("data-theme", this.config.theme);
+		this.container.style.setProperty("--bonsai-brand-color", this.config.brandColor);
+		this.container.style.setProperty("--bonsai-text-color", this.config.textColor);
+		this.container.style.setProperty("--bonsai-muted-color", this.config.mutedColor);
+		this.container.style.setProperty("--bonsai-input-bg", this.config.inputBg);
+		if (this.config.suggestionsTextColor) this.container.style.setProperty("--bonsai-suggestions-text-color", this.config.suggestionsTextColor);
+		if (this.config.inputTextColor) this.container.style.setProperty("--bonsai-input-text-color", this.config.inputTextColor);
+		if (this.config.suggestionsHoverBg) this.container.style.setProperty("--bonsai-suggestions-hover-bg", this.config.suggestionsHoverBg);
+		const wrapper = document.createElement("div");
+		wrapper.className = this.buildClassName("bonsai-searchbar-wrapper");
+		this.applyPart(wrapper, "searchbar-wrapper");
+		this.searchBar = document.createElement("div");
+		this.searchBar.className = this.buildClassName("bonsai-searchbar");
+		this.applyPart(this.searchBar, "searchbar");
+		this.searchBar.style.opacity = this.config.inputOpacity;
+		const searchIcon = document.createElement("div");
+		searchIcon.className = this.buildClassName("bonsai-searchbar-icon");
+		this.applyPart(searchIcon, "searchbar-icon");
+		searchIcon.innerHTML = ICONS$1.search;
+		this.searchBar.appendChild(searchIcon);
+		this.searchInput = document.createElement("input");
+		this.searchInput.type = "text";
+		this.searchInput.className = this.buildClassName("bonsai-searchbar-input");
+		this.applyPart(this.searchInput, "searchbar-input");
+		this.searchInput.placeholder = this.config.placeholder;
+		this.searchInput.setAttribute("aria-label", "Search input");
+		this.searchBar.appendChild(this.searchInput);
+		const actionsContainer = document.createElement("div");
+		actionsContainer.className = this.buildClassName("bonsai-searchbar-actions");
+		this.applyPart(actionsContainer, "searchbar-actions");
+		this.submitBtn = document.createElement("button");
+		this.submitBtn.type = "button";
+		this.submitBtn.className = this.buildClassName("bonsai-searchbar-submit");
+		this.applyPart(this.submitBtn, "searchbar-submit");
+		this.submitBtn.setAttribute("aria-label", "Submit search");
+		this.submitBtn.innerHTML = ICONS$1.arrowRight;
+		actionsContainer.appendChild(this.submitBtn);
+		const closeBtn = document.createElement("button");
+		closeBtn.type = "button";
+		closeBtn.className = this.buildClassName("bonsai-searchbar-close");
+		if (this.config.closeButton) closeBtn.classList.add("bonsai-searchbar-visible");
+		this.applyPart(closeBtn, "searchbar-close");
+		closeBtn.setAttribute("aria-label", "Close search");
+		closeBtn.innerHTML = ICONS$1.close;
+		closeBtn.addEventListener("click", () => this.config.onClose());
+		actionsContainer.appendChild(closeBtn);
+		this.searchBar.appendChild(actionsContainer);
+		wrapper.appendChild(this.searchBar);
+		if (this.config.suggestions.length > 0) {
+			this.suggestionsDropdown = document.createElement("div");
+			this.suggestionsDropdown.className = this.buildClassName("bonsai-searchbar-suggestions");
+			this.applyPart(this.suggestionsDropdown, "searchbar-suggestions");
+			this.suggestionsDropdown.setAttribute("role", "listbox");
+			this.renderSuggestions();
+			wrapper.appendChild(this.suggestionsDropdown);
+		}
+		this.container.appendChild(wrapper);
+		const poweredBy = document.createElement("div");
+		poweredBy.className = this.buildClassName("bonsai-searchbar-powered");
+		poweredBy.innerHTML = `powered by <a href="https://www.hibonsai.com/" target="_blank" rel="noopener" class="bonsai-searchbar-powered-link v${VERSION$1}">Bonsai<span class="bonsai-searchbar-powered-dot"></span></a>`;
+		this.applyPart(poweredBy, "searchbar-powered");
+		const poweredLink = poweredBy.querySelector(".bonsai-searchbar-powered-link");
+		if (poweredLink) this.applyPart(poweredLink, "searchbar-powered-link");
+		const poweredDot = poweredBy.querySelector(".bonsai-searchbar-powered-dot");
+		if (poweredDot) this.applyPart(poweredDot, "searchbar-powered-dot");
+		this.container.appendChild(poweredBy);
+	}
+	/** Render suggestions in the dropdown */
+	renderSuggestions() {
+		if (!this.suggestionsDropdown) return;
+		this.suggestionsDropdown.innerHTML = "";
+		(this.query ? this.config.suggestions.filter((s) => s.toLowerCase().includes(this.query.toLowerCase())).slice(0, 5) : this.config.suggestions.slice(0, 5)).forEach((suggestion) => {
+			const item = document.createElement("button");
+			item.type = "button";
+			item.className = this.buildClassName("bonsai-searchbar-suggestion");
+			this.applyPart(item, "searchbar-suggestion");
+			item.setAttribute("role", "option");
+			const text = document.createElement("span");
+			text.textContent = suggestion;
+			this.applyPart(text, "searchbar-suggestion-text");
+			item.appendChild(text);
+			const arrow = document.createElement("div");
+			arrow.className = this.buildClassName("bonsai-searchbar-suggestion-arrow");
+			this.applyPart(arrow, "searchbar-suggestion-arrow");
+			arrow.innerHTML = ICONS$1.arrowRight;
+			item.appendChild(arrow);
+			item.addEventListener("click", () => this.handleSuggestionClick(suggestion));
+			this.suggestionsDropdown.appendChild(item);
+		});
+	}
+	/** Attach event listeners */
+	attachEventListeners() {
+		if (!this.searchInput) return;
+		this.searchInput.addEventListener("focus", () => this.handleFocus());
+		this.searchInput.addEventListener("blur", () => this.handleBlur());
+		this.searchInput.addEventListener("input", (e) => this.handleInput(e));
+		this.searchInput.addEventListener("keydown", (e) => this.handleKeyDown(e));
+		this.submitBtn?.addEventListener("click", () => this.handleSubmit());
+	}
+	/** Handle input focus */
+	handleFocus() {
+		if (this.state === "default") this.setState("focused");
+		this.searchBar?.classList.add("bonsai-searchbar-focused");
+		if (this.suggestionsDropdown) {
+			this.renderSuggestions();
+			this.suggestionsDropdown.classList.add("bonsai-searchbar-visible");
+		}
+	}
+	/** Handle input blur */
+	handleBlur() {
+		this.searchBar?.classList.remove("bonsai-searchbar-focused");
+		setTimeout(() => {
+			this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+		}, 200);
+	}
+	/** Handle input change */
+	handleInput(e) {
+		this.query = e.target.value;
+		if (this.query) {
+			this.setState("filled");
+			this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+		} else {
+			this.setState("focused");
+			if (this.suggestionsDropdown) {
+				this.renderSuggestions();
+				this.suggestionsDropdown.classList.add("bonsai-searchbar-visible");
+			}
+		}
+	}
+	/** Handle key down */
+	handleKeyDown(e) {
+		if (e.key === "Enter" && this.query) {
+			e.preventDefault();
+			this.handleSubmit();
+		}
+	}
+	/** Handle suggestion click */
+	handleSuggestionClick(suggestion) {
+		this.query = suggestion;
+		if (this.searchInput) this.searchInput.value = suggestion;
+		this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+		this.handleSubmit();
+	}
+	/** Handle search submit - redirect to search page */
+	handleSubmit(searchQuery) {
+		const queryToSearch = searchQuery ?? this.query;
+		if (!queryToSearch) return;
+		try {
+			localStorage.setItem("bonsai-search-query", queryToSearch);
+		} catch {}
+		const url = `${this.config.searchPath}?q=${encodeURIComponent(queryToSearch)}`;
+		window.location.href = url;
+	}
+	/** Set the current state and update UI */
+	setState(newState) {
+		this.state = newState;
+		this.updateSubmitButton();
+	}
+	/** Update submit button visibility based on state */
+	updateSubmitButton() {
+		if (!this.submitBtn) return;
+		if (this.state === "filled") this.submitBtn.classList.add("bonsai-searchbar-visible");
+		else this.submitBtn.classList.remove("bonsai-searchbar-visible");
+	}
+	/** Set the search query programmatically */
+	setQuery(query) {
+		this.query = query;
+		if (this.searchInput) this.searchInput.value = query;
+		if (query) this.setState("filled");
+		else this.setState("default");
+	}
+	/** Submit the search programmatically */
+	submit() {
+		this.handleSubmit();
+	}
+	/** Clear the search input */
+	clear() {
+		this.query = "";
+		if (this.searchInput) this.searchInput.value = "";
+		this.setState("default");
+	}
+	/** Destroy the instance and clean up */
+	destroy() {
+		this.container.innerHTML = "";
+	}
+};
+if (typeof window !== "undefined") window.BonsaiSearchBar = BonsaiSearchBar;
+
+//#endregion
+//#region src/bonsai-searchbar-webcomponent.ts
+const SDK_CSS = sdk_default || "";
+if (typeof window !== "undefined" && !SDK_CSS) console.warn("BonsaiSearchBar: CSS not loaded from file, will use fallback");
+/**
+* Web Component for Bonsai Search Bar
+* Fully encapsulated with Shadow DOM, no inherited styles
+*
+* Usage:
+* <bonsai-searchbar
+*   search-path="/ai-search"
+*   placeholder="Describe what you're looking for..."
+*   suggestions='["suggestion 1", "suggestion 2"]'
+*   brand-color="#0A5B3B"
+*   text-color="#303030"
+*   muted-color="#9CA3AF"
+*   input-background="#f5f5f5"
+*   input-opacity="1"
+*   close-button>
+* </bonsai-searchbar>
+*/
+var BonsaiSearchBarElement = class extends HTMLElement {
+	searchBar = null;
+	shadow;
+	container = null;
+	static get observedAttributes() {
+		return [
+			"search-path",
+			"placeholder",
+			"suggestions",
+			"brand-color",
+			"text-color",
+			"suggestions-text-color",
+			"input-text-color",
+			"muted-color",
+			"input-bg",
+			"input-background",
+			"input-opacity",
+			"suggestions-hover-bg",
+			"theme",
+			"close-button"
+		];
+	}
+	constructor() {
+		super();
+		this.shadow = this.attachShadow({ mode: "closed" });
+	}
+	connectedCallback() {
+		this.render();
+		this.initialize();
+	}
+	disconnectedCallback() {
+		this.searchBar?.destroy();
+		this.searchBar = null;
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue || !this.searchBar) return;
+		if ([
+			"search-path",
+			"placeholder",
+			"suggestions"
+		].includes(name)) {
+			this.disconnectedCallback();
+			this.connectedCallback();
+		} else this.updateStyles();
+	}
+	render() {
+		let css = (SDK_CSS + "\n" + SEARCHBAR_STYLES).trim();
+		if (!css || css.trim().length < 100) {
+			console.warn("BonsaiSearchBar: CSS not loaded, using fallback");
+			css = this.getDefaultCSS();
+		}
+		css = css.replace(/:root\s*\{/g, ":host {");
+		const style = document.createElement("style");
+		style.textContent = css;
+		this.shadow.appendChild(style);
+		this.container = document.createElement("div");
+		this.container.style.width = "100%";
+		this.shadow.appendChild(this.container);
+		this.updateStyles();
+	}
+	updateStyles() {
+		const themeAttr = this.getAttribute("theme") || "light";
+		const normalizedTheme = themeAttr === "dark" || themeAttr === "auto" ? themeAttr : "light";
+		const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+		const resolvedTheme = normalizedTheme === "auto" ? prefersDark ? "dark" : "light" : normalizedTheme;
+		this.setAttribute("data-theme", resolvedTheme);
+		const setOrClear = (name, value) => {
+			if (value && value.trim().length > 0) this.style.setProperty(name, value);
+			else this.style.removeProperty(name);
+		};
+		setOrClear("--bonsai-brand-color", this.getAttribute("brand-color") || "#0A5B3B");
+		setOrClear("--bonsai-text-color", this.getAttribute("text-color") || "#303030");
+		setOrClear("--bonsai-muted-color", this.getAttribute("muted-color") || "#9CA3AF");
+		setOrClear("--bonsai-input-bg", this.getAttribute("input-bg") || this.getAttribute("input-background") || "#f5f5f5");
+		const suggestionsTextColor = this.getAttribute("suggestions-text-color");
+		const inputTextColor = this.getAttribute("input-text-color");
+		setOrClear("--bonsai-suggestions-text-color", suggestionsTextColor || inputTextColor);
+		setOrClear("--bonsai-input-text-color", inputTextColor);
+		setOrClear("--bonsai-suggestions-hover-bg", this.getAttribute("suggestions-hover-bg"));
+	}
+	initialize() {
+		if (!this.container) return;
+		const suggestionsAttr = this.getAttribute("suggestions");
+		let suggestions = [];
+		if (suggestionsAttr) try {
+			suggestions = JSON.parse(suggestionsAttr);
+		} catch (e) {
+			console.warn("bonsai-searchbar: Invalid suggestions JSON, using empty array");
+		}
+		const themeAttr = this.getAttribute("theme") || "light";
+		const theme = themeAttr === "dark" || themeAttr === "auto" ? themeAttr : "light";
+		this.searchBar = new BonsaiSearchBar({
+			container: this.container,
+			searchPath: this.getAttribute("search-path") || "/ai-search",
+			placeholder: this.getAttribute("placeholder") || "Describe what you're looking for...",
+			suggestions,
+			brandColor: this.getAttribute("brand-color") || "#0A5B3B",
+			textColor: this.getAttribute("text-color") || "#303030",
+			suggestionsTextColor: this.getAttribute("suggestions-text-color") || void 0,
+			inputTextColor: this.getAttribute("input-text-color") || void 0,
+			mutedColor: this.getAttribute("muted-color") || "#9CA3AF",
+			inputBg: this.getAttribute("input-bg") || this.getAttribute("input-background") || "#f5f5f5",
+			inputOpacity: this.getAttribute("input-opacity") || "1",
+			suggestionsHoverBg: this.getAttribute("suggestions-hover-bg") || void 0,
+			theme,
+			closeButton: this.hasAttribute("close-button"),
+			onClose: () => {
+				this.dispatchEvent(new CustomEvent("close", {
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+	}
+	setQuery(query) {
+		this.searchBar?.setQuery(query);
+	}
+	submit() {
+		this.searchBar?.submit();
+	}
+	clear() {
+		this.searchBar?.clear();
+	}
+	getDefaultCSS() {
+		return `
+      :host {
+        display: block;
+        width: 100%;
+        --bonsai-brand-color: #0A5B3B;
+        --bonsai-text-color: #303030;
+        --bonsai-suggestions-text-color: #303030;
+        --bonsai-input-text-color: #303030;
+        --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);
+        --bonsai-muted-color: #9CA3AF;
+        --bonsai-input-bg: #f5f5f5;
+      }
+
+      :host([data-theme="dark"]) {
+        --bonsai-text-color: #e5e7eb;
+        --bonsai-suggestions-text-color: #e5e7eb;
+        --bonsai-input-text-color: #e5e7eb;
+        --bonsai-suggestions-hover-bg: rgba(255, 255, 255, 0.06);
+        --bonsai-muted-color: #a1a1aa;
+        --bonsai-input-bg: #1f2229;
+      }
+    `;
+	}
+};
+if (typeof window !== "undefined" && !customElements.get("bonsai-searchbar")) customElements.define("bonsai-searchbar", BonsaiSearchBarElement);
+
+//#endregion
+//#region src/index.ts
+const VERSION = "3.0.8";
+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>
+    <path d="m21 21-4.35-4.35"></path>
+  </svg>`,
+	arrowRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14"></path>
+    <path d="m12 5 7 7-7 7"></path>
+  </svg>`,
+	check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>`,
+	reset: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+    <path d="M3 3v5h5"></path>
+  </svg>`,
+	spinner: `<svg viewBox="0 0 24 24">
+    <circle class="bonsai-spinner-track" cx="12" cy="12" r="10" stroke-width="3" fill="none"></circle>
+    <path class="bonsai-spinner-fill" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>`
+};
+var BonsaiSearch = class {
+	config;
+	state = "default";
+	container;
+	searchBar = null;
+	searchInput = null;
+	actionsContainer = null;
+	submitBtn = null;
+	loadingState = null;
+	loadingTextInner = null;
+	doneState = null;
+	resetBtn = null;
+	suggestionsDropdown = null;
+	poweredBy = null;
+	resultsContainer = null;
+	query = "";
+	loadingIndex = 0;
+	loadingInterval = null;
+	debounceTimer = null;
+	abortController = null;
+	loadingStates = [
+		"Searching",
+		"Analyzing",
+		"Curating"
+	];
+	constructor(config) {
+		this.container = config.container;
+		this.config = {
+			container: config.container,
+			apiKey: config.apiKey,
+			baseUrl: config.baseUrl || this.inferBaseUrl(),
+			placeholder: config.placeholder || "Describe what you're looking for...",
+			suggestions: config.suggestions || [],
+			debounceMs: config.debounceMs ?? 0,
+			maxResults: config.maxResults ?? 50,
+			timeoutMs: config.timeoutMs ?? 3e4,
+			imageHostname: config.imageHostname || "",
+			generateSrcSet: config.generateSrcSet ?? false,
+			srcSetSizes: config.srcSetSizes || [],
+			classAdditions: config.classAdditions || {},
+			renderPrice: config.renderPrice ?? false,
+			renderPriceWithTitle: config.renderPriceWithTitle ?? true,
+			imageObjectFit: config.imageObjectFit || "cover",
+			markdown: config.markdown ?? false,
+			featuredItemsLabel: config.featuredItemsLabel || "Featured Items",
+			moreItemsLabel: config.moreItemsLabel || "More Items",
+			itemsLabel: config.itemsLabel || "Items",
+			onPrice: config.onPrice ?? (() => ""),
+			onImg: config.onImg ?? (() => {}),
+			onSearch: config.onSearch ?? (() => {}),
+			onResults: config.onResults ?? (() => {}),
+			onAi: config.onAi ?? (() => {}),
+			onError: config.onError ?? (() => {})
+		};
+		this.validateConfig();
+		this.render();
+		this.attachEventListeners();
+		this.checkForQueryParam();
+	}
+	/** Get the SDK version */
+	static get version() {
+		return VERSION;
+	}
+	/** Infer base URL from script tag or use current origin */
+	inferBaseUrl() {
+		const script = document.querySelector("script[src*=\"bonsai-search\"]");
+		if (script?.src) {
+			const url = new URL(script.src);
+			return `${url.protocol}//${url.host}`;
+		}
+		return window.location.origin;
+	}
+	/** Build class name string with any configured additional classes */
+	buildClassName(baseClass) {
+		const additions = this.config.classAdditions[baseClass];
+		if (additions && additions.length > 0) return `${baseClass} ${additions.join(" ")}`;
+		return baseClass;
+	}
+	/** Apply a shadow part name for external styling */
+	applyPart(el, part) {
+		el.setAttribute("part", part);
+	}
+	/** Validate configuration */
+	validateConfig() {
+		if (!this.config.container) throw new Error("BonsaiSearch: container element is required");
+		if (!this.config.apiKey) throw new Error("BonsaiSearch: apiKey is required");
+	}
+	/** Render the search UI */
+	render() {
+		this.container.innerHTML = "";
+		this.container.classList.add("bonsai-search-container");
+		const wrapper = document.createElement("div");
+		wrapper.className = this.buildClassName("bonsai-search-wrapper");
+		this.applyPart(wrapper, "search-wrapper");
+		this.searchBar = document.createElement("div");
+		this.searchBar.className = this.buildClassName("bonsai-search-bar");
+		this.applyPart(this.searchBar, "search-bar");
+		const searchIcon = document.createElement("div");
+		searchIcon.className = this.buildClassName("bonsai-search-icon");
+		this.applyPart(searchIcon, "search-icon");
+		searchIcon.innerHTML = ICONS.search;
+		this.searchBar.appendChild(searchIcon);
+		this.searchInput = document.createElement("input");
+		this.searchInput.type = "text";
+		this.searchInput.className = this.buildClassName("bonsai-search-input");
+		this.applyPart(this.searchInput, "search-input");
+		this.searchInput.placeholder = this.config.placeholder;
+		this.searchInput.setAttribute("aria-label", "Search input");
+		this.searchBar.appendChild(this.searchInput);
+		this.actionsContainer = document.createElement("div");
+		this.actionsContainer.className = this.buildClassName("bonsai-search-actions");
+		this.applyPart(this.actionsContainer, "search-actions");
+		this.submitBtn = document.createElement("button");
+		this.submitBtn.type = "button";
+		this.submitBtn.className = this.buildClassName("bonsai-submit-btn");
+		this.applyPart(this.submitBtn, "submit-button");
+		this.submitBtn.setAttribute("aria-label", "Submit search");
+		this.submitBtn.innerHTML = ICONS.arrowRight;
+		this.actionsContainer.appendChild(this.submitBtn);
+		this.loadingState = document.createElement("div");
+		this.loadingState.className = this.buildClassName("bonsai-loading-state");
+		this.applyPart(this.loadingState, "loading-state");
+		const loadingText = document.createElement("div");
+		loadingText.className = this.buildClassName("bonsai-loading-text");
+		this.loadingTextInner = document.createElement("div");
+		this.loadingTextInner.className = this.buildClassName("bonsai-loading-text-inner");
+		this.applyPart(loadingText, "loading-text");
+		this.applyPart(this.loadingTextInner, "loading-text-inner");
+		this.loadingStates.forEach((text) => {
+			const span = document.createElement("span");
+			span.textContent = text;
+			this.loadingTextInner.appendChild(span);
+		});
+		loadingText.appendChild(this.loadingTextInner);
+		this.loadingState.appendChild(loadingText);
+		const spinner = document.createElement("div");
+		spinner.className = this.buildClassName("bonsai-spinner");
+		this.applyPart(spinner, "spinner");
+		spinner.innerHTML = ICONS.spinner;
+		this.loadingState.appendChild(spinner);
+		this.actionsContainer.appendChild(this.loadingState);
+		this.doneState = document.createElement("div");
+		this.doneState.className = this.buildClassName("bonsai-done-state");
+		this.applyPart(this.doneState, "done-state");
+		const doneText = document.createElement("span");
+		doneText.className = this.buildClassName("bonsai-done-text");
+		this.applyPart(doneText, "done-text");
+		doneText.textContent = "Done!";
+		this.doneState.appendChild(doneText);
+		const doneIcon = document.createElement("div");
+		doneIcon.className = this.buildClassName("bonsai-done-icon");
+		this.applyPart(doneIcon, "done-icon");
+		doneIcon.innerHTML = ICONS.check;
+		this.doneState.appendChild(doneIcon);
+		this.actionsContainer.appendChild(this.doneState);
+		this.resetBtn = document.createElement("button");
+		this.resetBtn.type = "button";
+		this.resetBtn.className = this.buildClassName("bonsai-reset-btn");
+		this.applyPart(this.resetBtn, "reset-button");
+		this.resetBtn.setAttribute("aria-label", "Reset search");
+		const resetText = document.createElement("span");
+		resetText.className = this.buildClassName("bonsai-reset-text");
+		this.applyPart(resetText, "reset-text");
+		resetText.textContent = "Reset";
+		this.resetBtn.appendChild(resetText);
+		const resetIcon = document.createElement("div");
+		resetIcon.className = this.buildClassName("bonsai-reset-icon");
+		this.applyPart(resetIcon, "reset-icon");
+		resetIcon.innerHTML = ICONS.reset;
+		this.resetBtn.appendChild(resetIcon);
+		this.actionsContainer.appendChild(this.resetBtn);
+		this.searchBar.appendChild(this.actionsContainer);
+		if (this.config.suggestions.length > 0) {
+			this.suggestionsDropdown = document.createElement("div");
+			this.suggestionsDropdown.className = this.buildClassName("bonsai-suggestions");
+			this.applyPart(this.suggestionsDropdown, "suggestions");
+			this.suggestionsDropdown.id = "bonsai-suggestions";
+			this.suggestionsDropdown.setAttribute("role", "listbox");
+			this.renderSuggestions();
+			this.searchBar.appendChild(this.suggestionsDropdown);
+		}
+		wrapper.appendChild(this.searchBar);
+		this.poweredBy = document.createElement("div");
+		this.poweredBy.className = this.buildClassName("bonsai-powered-by");
+		this.applyPart(this.poweredBy, "powered-by");
+		this.poweredBy.innerHTML = `powered by <a href="https://www.hibonsai.com/" target="_blank" rel="noopener">Bonsai<span class="bonsai-powered-by-dot"></span></a>`;
+		wrapper.appendChild(this.poweredBy);
+		this.resultsContainer = document.createElement("div");
+		this.resultsContainer.className = this.buildClassName("bonsai-results");
+		this.applyPart(this.resultsContainer, "results");
+		wrapper.appendChild(this.resultsContainer);
+		this.container.appendChild(wrapper);
+	}
+	/** Render suggestions in the dropdown */
+	renderSuggestions() {
+		if (!this.suggestionsDropdown) return;
+		this.suggestionsDropdown.innerHTML = "";
+		this.config.suggestions.slice(0, 5).forEach((suggestion) => {
+			const item = document.createElement("button");
+			item.type = "button";
+			item.className = this.buildClassName("bonsai-suggestion-item");
+			this.applyPart(item, "suggestion-item");
+			item.setAttribute("role", "option");
+			const text = document.createElement("span");
+			text.textContent = suggestion;
+			this.applyPart(text, "suggestion-text");
+			item.appendChild(text);
+			const arrow = document.createElement("div");
+			arrow.className = this.buildClassName("bonsai-suggestion-arrow");
+			this.applyPart(arrow, "suggestion-arrow");
+			arrow.innerHTML = ICONS.arrowRight;
+			item.appendChild(arrow);
+			item.addEventListener("click", () => this.handleSuggestionClick(suggestion));
+			this.suggestionsDropdown.appendChild(item);
+		});
+	}
+	/** Attach event listeners */
+	attachEventListeners() {
+		if (!this.searchInput) return;
+		this.searchInput.addEventListener("focus", () => this.handleFocus());
+		this.searchInput.addEventListener("blur", () => this.handleBlur());
+		this.searchInput.addEventListener("input", (e) => this.handleInput(e));
+		this.searchInput.addEventListener("keydown", (e) => this.handleKeyDown(e));
+		this.submitBtn?.addEventListener("click", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.handleSubmit();
+		});
+		this.resetBtn?.addEventListener("click", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.handleReset();
+		});
+	}
+	/** Handle input focus */
+	handleFocus() {
+		if (this.state === "default" || this.state === "retry") {
+			if (!this.query && this.searchInput) this.searchInput.value = "";
+			else if (this.query && this.searchInput) this.searchInput.value = this.query;
+			if (!this.query) this.setState("focused");
+		}
+		this.searchBar?.classList.add("bonsai-focused");
+		if (!this.query && this.suggestionsDropdown) {
+			this.renderSuggestions();
+			this.suggestionsDropdown.classList.add("bonsai-visible");
+		}
+	}
+	/** Handle input blur */
+	handleBlur() {
+		this.searchBar?.classList.remove("bonsai-focused");
+		setTimeout(() => {
+			this.suggestionsDropdown?.classList.remove("bonsai-visible");
+		}, 200);
+	}
+	/** Handle input change */
+	handleInput(e) {
+		this.query = e.target.value;
+		if (this.debounceTimer !== null) {
+			window.clearTimeout(this.debounceTimer);
+			this.debounceTimer = null;
+		}
+		if (this.query) {
+			if (this.state === "retry" || this.state === "done") this.setState("filled");
+			else if (this.state !== "loading") this.setState("filled");
+			this.suggestionsDropdown?.classList.remove("bonsai-visible");
+		} else {
+			if (this.state !== "loading" && this.state !== "done" && this.state !== "retry") this.setState("focused");
+			if (this.suggestionsDropdown) {
+				this.renderSuggestions();
+				this.suggestionsDropdown.classList.add("bonsai-visible");
+			}
+		}
+	}
+	/** Handle key down */
+	handleKeyDown(e) {
+		if (e.key === "Enter" && this.query) {
+			e.preventDefault();
+			if (this.debounceTimer !== null) {
+				window.clearTimeout(this.debounceTimer);
+				this.debounceTimer = null;
+			}
+			this.handleSubmit();
+		}
+	}
+	/** Handle suggestion click */
+	handleSuggestionClick(suggestion) {
+		this.query = suggestion;
+		if (this.searchInput) this.searchInput.value = suggestion;
+		this.suggestionsDropdown?.classList.remove("bonsai-visible");
+		this.handleSubmit();
+	}
+	/** Handle search submit using Server-Sent Events */
+	async handleSubmit() {
+		if (!this.query || !this.query.trim()) return;
+		if (this.state === "loading") return;
+		if (this.debounceTimer !== null) {
+			window.clearTimeout(this.debounceTimer);
+			this.debounceTimer = null;
+		}
+		if (this.abortController) this.abortController.abort();
+		this.abortController = new AbortController();
+		this.setState("loading");
+		this.config.onSearch(this.query);
+		this.startLoadingAnimation();
+		let initialResults = [];
+		let hasReceivedResults = false;
+		let hasReceivedAi = false;
+		try {
+			this.resultsContainer.innerHTML = "";
+			const url = new URL(this.config.baseUrl);
+			url.searchParams.set("q", this.query);
+			if (this.config.markdown) url.searchParams.set("markdown", "true");
+			const response = await fetch(url.toString(), {
+				method: "GET",
+				headers: {
+					Accept: "text/event-stream",
+					"X-API-Key": this.config.apiKey
+				},
+				signal: this.abortController.signal
+			});
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+			}
+			const reader = response.body?.getReader();
+			if (!reader) throw new Error("Unable to read response stream");
+			const decoder = new TextDecoder();
+			let buffer = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				buffer += decoder.decode(value, { stream: true });
+				const events = this.parseSSEEvents(buffer);
+				buffer = events.remaining;
+				for (const event of events.parsed) if (event.type === "results") {
+					hasReceivedResults = true;
+					const data = event.data;
+					if (!data.success && data.error) throw new Error(data.error);
+					initialResults = (data.results || []).filter((r) => r.publicUrl && r.publicUrl.trim() !== "");
+					initialResults = this.config.maxResults ? initialResults.slice(0, this.config.maxResults) : initialResults;
+					this.renderResults([], initialResults);
+					this.showRecommendationsLoading();
+					this.config.onResults(initialResults);
+				} else if (event.type === "ai") {
+					hasReceivedAi = true;
+					const data = event.data;
+					let finalResults = (data.results || []).filter((r) => r.publicUrl && r.publicUrl.trim() !== "");
+					finalResults = this.config.maxResults ? finalResults.slice(0, this.config.maxResults) : finalResults;
+					this.hideRecommendationsLoading();
+					let resultsToRender = finalResults;
+					if (finalResults.length === 0) {
+						const recProductIds = (data.recommendations || []).flatMap((r) => r.productIds || []);
+						if (recProductIds.length > 0) {
+							const matched = recProductIds.map((id) => initialResults.find((r) => r.id === id)).filter((r) => r != null);
+							resultsToRender = matched.length > 0 ? matched : initialResults;
+						} else resultsToRender = initialResults;
+					}
+					this.renderResults(data.recommendations || [], resultsToRender);
+					this.config.onAi(data);
+					this.stopLoadingAnimation();
+					this.setState("done");
+					setTimeout(() => {
+						if (this.state === "done") this.setState("retry");
+					}, 2e3);
+				}
+			}
+			if (hasReceivedResults && !hasReceivedAi) {
+				this.stopLoadingAnimation();
+				this.setState("done");
+				setTimeout(() => {
+					if (this.state === "done") this.setState("retry");
+				}, 2e3);
+			}
+		} catch (error) {
+			if (error instanceof Error) {
+				if (error.name === "AbortError") return;
+				this.renderError(error.message);
+				this.config.onError(error);
+			}
+			this.setState("retry");
+			this.stopLoadingAnimation();
+		}
+	}
+	/** Parse SSE events from a buffer string */
+	parseSSEEvents(buffer) {
+		const parsed = [];
+		const lines = buffer.split("\n");
+		let currentEvent = {};
+		let remaining = "";
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			if (i === lines.length - 1 && line !== "") {
+				remaining = line;
+				continue;
+			}
+			if (line.startsWith("event: ")) currentEvent.type = line.slice(7).trim();
+			else if (line.startsWith("data: ")) currentEvent.data = line.slice(6);
+			else if (line === "" && currentEvent.type && currentEvent.data) {
+				try {
+					const data = JSON.parse(currentEvent.data);
+					parsed.push({
+						type: currentEvent.type,
+						data
+					});
+				} catch (e) {
+					console.error("Failed to parse SSE data:", e);
+				}
+				currentEvent = {};
+			}
+		}
+		if (currentEvent.type || currentEvent.data) {
+			if (currentEvent.type) remaining = `event: ${currentEvent.type}\n` + remaining;
+			if (currentEvent.data) remaining = (remaining ? remaining + "\n" : "") + `data: ${currentEvent.data}`;
+		}
+		return {
+			parsed,
+			remaining
+		};
+	}
+	/** Handle reset */
+	handleReset() {
+		this.query = "";
+		if (this.searchInput) this.searchInput.value = "";
+		this.setState("focused");
+		this.searchInput?.focus();
+		if (this.resultsContainer) this.resultsContainer.classList.remove("bonsai-visible");
+		if (this.suggestionsDropdown) {
+			this.renderSuggestions();
+			this.suggestionsDropdown.classList.add("bonsai-visible");
+		}
+	}
+	/** Set the current state and update UI */
+	setState(newState) {
+		this.state = newState;
+		this.updateActionButtons();
+		this.updateInputState();
+	}
+	/** Update action buttons visibility based on state */
+	updateActionButtons() {
+		this.submitBtn?.classList.remove("bonsai-visible");
+		this.loadingState?.classList.remove("bonsai-visible");
+		this.doneState?.classList.remove("bonsai-visible");
+		this.resetBtn?.classList.remove("bonsai-visible");
+		switch (this.state) {
+			case "filled":
+				this.submitBtn?.classList.add("bonsai-visible");
+				break;
+			case "loading":
+				this.loadingState?.classList.add("bonsai-visible");
+				break;
+			case "done":
+				this.doneState?.classList.add("bonsai-visible");
+				break;
+			case "retry":
+				this.resetBtn?.classList.add("bonsai-visible");
+				break;
+		}
+	}
+	/** Update input state (disabled only during loading) */
+	updateInputState() {
+		if (!this.searchInput) return;
+		const isDisabled = this.state === "loading";
+		const wasDisabled = this.searchInput.disabled;
+		this.searchInput.disabled = isDisabled;
+		if (wasDisabled && !isDisabled && this.query) this.searchInput.value = this.query;
+	}
+	/** Start loading animation */
+	startLoadingAnimation() {
+		this.loadingIndex = 0;
+		this.updateLoadingText();
+		this.loadingInterval = window.setInterval(() => {
+			if (this.loadingIndex < this.loadingStates.length - 1) {
+				this.loadingIndex++;
+				this.updateLoadingText();
+			}
+		}, 1e3);
+	}
+	/** Update loading text position */
+	updateLoadingText() {
+		if (this.loadingTextInner) {
+			const offset = this.loadingIndex * 1.25;
+			this.loadingTextInner.style.transform = `translateY(-${offset}rem)`;
+		}
+	}
+	/** Stop loading animation */
+	stopLoadingAnimation() {
+		if (this.loadingInterval !== null) {
+			window.clearInterval(this.loadingInterval);
+			this.loadingInterval = null;
+		}
+	}
+	/** Show recommendations loading indicator */
+	showRecommendationsLoading() {
+		if (!this.resultsContainer) return;
+		this.hideRecommendationsLoading();
+		const loadingIndicator = document.createElement("div");
+		loadingIndicator.className = this.buildClassName("bonsai-recommendations-loading");
+		this.applyPart(loadingIndicator, "recommendations-loading");
+		loadingIndicator.innerHTML = `
+      <div class="${this.buildClassName("bonsai-recommendations-loading-spinner")}">
+        ${ICONS.spinner}
+      </div>
+      <span class="${this.buildClassName("bonsai-recommendations-loading-text")}">Loading recommendations...</span>
+    `;
+		const loadingSpinner = loadingIndicator.querySelector(".bonsai-recommendations-loading-spinner");
+		if (loadingSpinner) this.applyPart(loadingSpinner, "recommendations-loading-spinner");
+		const loadingText = loadingIndicator.querySelector(".bonsai-recommendations-loading-text");
+		if (loadingText) this.applyPart(loadingText, "recommendations-loading-text");
+		this.resultsContainer.insertBefore(loadingIndicator, this.resultsContainer.firstChild);
+	}
+	/** Hide recommendations loading indicator */
+	hideRecommendationsLoading() {
+		if (!this.resultsContainer) return;
+		const loadingIndicator = this.resultsContainer.querySelector(".bonsai-recommendations-loading");
+		if (loadingIndicator) loadingIndicator.remove();
+	}
+	/** Render search results */
+	renderResults(recommendations, results) {
+		if (!this.resultsContainer) return;
+		if (results.length === 0 && recommendations.length === 0) {
+			this.renderEmpty();
+			return;
+		}
+		const recommendedProductIds = /* @__PURE__ */ new Set();
+		for (const rec of recommendations) if (rec.productIds) for (const id of rec.productIds) recommendedProductIds.add(id);
+		if (recommendations.length > 0) for (const rec of recommendations) {
+			const summarySection = document.createElement("div");
+			summarySection.className = this.buildClassName("bonsai-summary");
+			this.applyPart(summarySection, "summary");
+			const summaryText = document.createElement(this.config.markdown ? "div" : "p");
+			summaryText.className = this.buildClassName("bonsai-summary-text");
+			this.applyPart(summaryText, "summary-text");
+			if (this.config.markdown) summaryText.innerHTML = marked.parse(rec.text, { async: false });
+			else summaryText.textContent = rec.text;
+			summarySection.appendChild(summaryText);
+			if (rec.productIds && rec.productIds.length > 0) {
+				const uniqueProductIds = [...new Set(rec.productIds)];
+				const recResults = [];
+				for (const prodId of uniqueProductIds) {
+					const product = results.find((r) => r.id === prodId);
+					if (product && product.publicUrl && product.publicUrl.trim() !== "") recResults.push(product);
+				}
+				const recProducts = document.createElement("div");
+				const recGrid = document.createElement("div");
+				if (recResults.length > 0) {
+					recProducts.className = this.buildClassName("bonsai-recommendation-products");
+					this.applyPart(recProducts, "recommendation-products");
+					const recHeader = document.createElement("h4");
+					recHeader.className = this.buildClassName("bonsai-recommendation-products-header");
+					this.applyPart(recHeader, "recommendation-products-header");
+					recHeader.textContent = this.config.featuredItemsLabel;
+					recProducts.appendChild(recHeader);
+					recGrid.className = this.buildClassName("bonsai-results-grid");
+					this.applyPart(recGrid, "results-grid");
+					for (const product of recResults) {
+						const card = this.createResultCard(product);
+						recGrid.appendChild(card);
+					}
+				}
+				recProducts.appendChild(recGrid);
+				summarySection.appendChild(recProducts);
+			}
+			this.resultsContainer.prepend(summarySection);
+		}
+		else if (results.length > 0) {
+			const resultsSection = document.createElement("div");
+			this.applyPart(resultsSection, "results-section");
+			const resultsHeader = document.createElement("h3");
+			resultsHeader.className = this.buildClassName("bonsai-results-header");
+			this.applyPart(resultsHeader, "results-header");
+			resultsHeader.textContent = recommendedProductIds.size > 0 ? this.config.moreItemsLabel : this.config.itemsLabel;
+			resultsSection.appendChild(resultsHeader);
+			const resultsGrid = document.createElement("div");
+			resultsGrid.className = this.buildClassName("bonsai-results-grid");
+			this.applyPart(resultsGrid, "results-grid");
+			for (const result of results) {
+				const card = this.createResultCard(result);
+				resultsGrid.appendChild(card);
+			}
+			resultsSection.appendChild(resultsGrid);
+			this.resultsContainer.appendChild(resultsSection);
+		}
+		this.resultsContainer.classList.add("bonsai-visible");
+		setTimeout(() => {
+			this.resultsContainer.querySelectorAll(".bonsai-result-card").forEach((card, index) => {
+				setTimeout(() => {
+					card.classList.add("bonsai-animate-in");
+				}, index * 100);
+			});
+		}, 50);
+	}
+	/** Generate srcset attribute for an image URL */
+	getSrcSet(url) {
+		if (!this.config.generateSrcSet || !this.config.imageHostname || this.config.srcSetSizes.length === 0) return "";
+		const filename = url.split("/").pop();
+		if (!filename) return "";
+		let baseUrl = `//${this.config.imageHostname}/cdn/shop/`;
+		if (url.includes("/products/")) baseUrl += "products/";
+		else baseUrl += "files/";
+		const fullPath = baseUrl + filename;
+		const srcSetEntries = [];
+		for (const size of this.config.srcSetSizes) {
+			const entry = fullPath.replace(/(\.\w+)(\?v=\d+)?$/, `_${size.width}x${size.height}_${size.crop}$1$2 ${size.width}w`);
+			srcSetEntries.push(entry);
+		}
+		return srcSetEntries.join(", ");
+	}
+	/** Resolve an image value that may be a string URL or an object with sourceUrl/source_url */
+	resolveImageUrl(image) {
+		let url = image;
+		if (url && typeof url === "object") {
+			const obj = url;
+			url = obj.sourceUrl || obj.source_url || null;
+		}
+		if (typeof url !== "string" || url.length === 0) return null;
+		try {
+			const parsed = new URL(url);
+			if (parsed.protocol === "http:" || parsed.protocol === "https:") return url;
+		} catch {}
+		return null;
+	}
+	/** Create a result card */
+	createResultCard(result) {
+		const card = document.createElement("a");
+		card.href = result.publicUrl;
+		card.className = this.buildClassName("bonsai-result-card");
+		this.applyPart(card, "result-card");
+		card.target = "_blank";
+		card.rel = "noopener";
+		const imageUrl = this.resolveImageUrl(result.image);
+		if (imageUrl) {
+			const imgWrapper = document.createElement("div");
+			imgWrapper.className = this.buildClassName("bonsai-result-image-wrapper");
+			this.applyPart(imgWrapper, "result-image-wrapper");
+			card.appendChild(imgWrapper);
+			const img = document.createElement("img");
+			img.className = this.buildClassName("bonsai-result-image");
+			this.applyPart(img, "result-image");
+			img.src = imageUrl;
+			img.alt = result.name;
+			img.loading = "lazy";
+			img.style.objectFit = this.config.imageObjectFit;
+			const srcset = this.getSrcSet(imageUrl);
+			if (srcset) img.srcset = srcset;
+			this.config.onImg(result, img, imgWrapper, this);
+			imgWrapper.appendChild(img);
+		}
+		const content = document.createElement("div");
+		content.className = this.buildClassName("bonsai-result-content");
+		this.applyPart(content, "result-content");
+		const title = document.createElement("h4");
+		title.className = this.buildClassName("bonsai-result-title");
+		this.applyPart(title, "result-title");
+		title.textContent = result.name;
+		content.appendChild(title);
+		if (this.config.renderPrice && result.price) {
+			const priceContainer = document.createElement("div");
+			priceContainer.className = this.buildClassName("bonsai-result-price-container");
+			this.applyPart(priceContainer, "result-price-container");
+			const price = document.createElement("span");
+			price.className = this.buildClassName("bonsai-result-price");
+			this.applyPart(price, "result-price");
+			price.textContent = this.config.onPrice(result, result.price, priceContainer);
+			priceContainer.appendChild(price);
+			if (result.compareAtPrice && result.compareAtPrice !== result.price) {
+				const compareAt = document.createElement("span");
+				compareAt.className = this.buildClassName("bonsai-result-compare-at");
+				this.applyPart(compareAt, "result-compare-at");
+				compareAt.textContent = this.config.onPrice(result, result.compareAtPrice);
+				priceContainer.appendChild(compareAt);
+			}
+			content.appendChild(priceContainer);
+		}
+		if (result.description) {
+			const caption = document.createElement("p");
+			caption.className = this.buildClassName("bonsai-result-caption");
+			this.applyPart(caption, "result-caption");
+			caption.textContent = result.description;
+			content.appendChild(caption);
+		} else if (!this.config.renderPrice && result.price) {
+			const caption = document.createElement("p");
+			caption.className = this.buildClassName("bonsai-result-caption");
+			this.applyPart(caption, "result-caption");
+			caption.textContent = this.config.onPrice(result, result.price, caption);
+			content.appendChild(caption);
+		}
+		card.appendChild(content);
+		return card;
+	}
+	/** Render empty state */
+	renderEmpty() {
+		if (!this.resultsContainer) return;
+		const empty = document.createElement("p");
+		empty.className = this.buildClassName("bonsai-empty-state");
+		this.applyPart(empty, "empty-state");
+		empty.textContent = "No matching products found. Try a different search query.";
+		this.resultsContainer.appendChild(empty);
+		this.resultsContainer.classList.add("bonsai-visible");
+	}
+	/** Render error state */
+	renderError(message) {
+		if (!this.resultsContainer) return;
+		this.resultsContainer.innerHTML = "";
+		const error = document.createElement("div");
+		error.className = this.buildClassName("bonsai-error");
+		this.applyPart(error, "error");
+		error.textContent = `Error: ${message}`;
+		this.resultsContainer.appendChild(error);
+		this.resultsContainer.classList.add("bonsai-visible");
+	}
+	/** Check for query parameter in URL or localStorage */
+	checkForQueryParam() {
+		const urlParams = new URLSearchParams(window.location.search);
+		let queryParam = urlParams.get("q") || urlParams.get("query");
+		if (!queryParam) try {
+			const storedQuery = localStorage.getItem("bonsai-search-query");
+			if (storedQuery) {
+				queryParam = storedQuery;
+				localStorage.removeItem("bonsai-search-query");
+			}
+		} catch {}
+		if (queryParam && this.searchInput) {
+			this.searchInput.value = queryParam;
+			this.query = queryParam;
+			this.handleSubmit();
+		}
+	}
+	/** Set a suggestion programmatically and trigger search */
+	setSuggestion(suggestion) {
+		if (this.searchInput) {
+			this.searchInput.value = suggestion;
+			this.query = suggestion;
+			this.handleSubmit();
+		}
+	}
+	/** Clear the search and results */
+	clear() {
+		this.handleReset();
+		if (this.resultsContainer) {
+			this.resultsContainer.innerHTML = "";
+			this.resultsContainer.classList.remove("bonsai-visible");
+		}
+	}
+	/** Focus the search input */
+	focus() {
+		this.searchInput?.focus();
+	}
+	/** Destroy the instance and clean up */
+	destroy() {
+		if (this.abortController) this.abortController.abort();
+		if (this.debounceTimer !== null) window.clearTimeout(this.debounceTimer);
+		if (this.loadingInterval !== null) window.clearInterval(this.loadingInterval);
+		this.container.innerHTML = "";
+	}
+};
+if (typeof window !== "undefined") window.BonsaiSearch = BonsaiSearch;
+
+//#endregion
+export { BonsaiSearch, BonsaiSearchBarElement, BonsaiSearchElement };