bonsai-search 3.0.8

package/dist/bonsai-sdk-3.0.8.js

@@ -0,0 +1,1698 @@
+(function(exports, 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.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
+exports.BonsaiSearch = BonsaiSearch;
+exports.BonsaiSearchBarElement = BonsaiSearchBarElement;
+exports.BonsaiSearchElement = BonsaiSearchElement;
+return exports;
+})({}, marked);