@nlweb-ai/search-components 0.1.9

package/dist/index.mjs

@@ -0,0 +1,1766 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject('/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-blue-300: oklch(80.9% 0.105 251.813);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-7xl: 80rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --leading-relaxed: 1.625;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .shimmer-container {\n    container-type: inline-size;\n    & .shimmer {\n      --shimmer-track-width: 100cqw;\n      --shimmer-track-height: max(100cqh, 50cqw, 200px);\n    }\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .inset-y-0 {\n    inset-block: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-3 {\n    top: calc(var(--spacing) * 3);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-12 {\n    top: calc(var(--spacing) * 12);\n  }\n  .top-\\[calc\\(100\\%_-_100px\\)\\] {\n    top: calc(100% - 100px);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .right-6 {\n    right: calc(var(--spacing) * 6);\n  }\n  .right-10 {\n    right: calc(var(--spacing) * 10);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-8 {\n    bottom: calc(var(--spacing) * 8);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-3\\.5 {\n    left: calc(var(--spacing) * 3.5);\n  }\n  .left-4 {\n    left: calc(var(--spacing) * 4);\n  }\n  .left-10 {\n    left: calc(var(--spacing) * 10);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-30 {\n    z-index: 30;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-2 {\n    margin-inline: calc(var(--spacing) * -2);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-6 {\n    width: calc(var(--spacing) * 6);\n    height: calc(var(--spacing) * 6);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-36 {\n    height: calc(var(--spacing) * 36);\n  }\n  .h-full\\! {\n    height: 100% !important;\n  }\n  .h-screen {\n    height: 100vh;\n  }\n  .max-h-12 {\n    max-height: calc(var(--spacing) * 12);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[60vh\\] {\n    max-height: 60vh;\n  }\n  .max-h-\\[80vh\\] {\n    max-height: 80vh;\n  }\n  .w-1\\/6 {\n    width: calc(1/6 * 100%);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-3\\/4 {\n    width: calc(3/4 * 100%);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n  .w-10\\/12 {\n    width: calc(10/12 * 100%);\n  }\n  .w-11\\/12 {\n    width: calc(11/12 * 100%);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-full\\! {\n    width: 100% !important;\n  }\n  .w-screen {\n    width: 100vw;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-3xl {\n    max-width: var(--container-3xl);\n  }\n  .max-w-7xl {\n    max-width: var(--container-7xl);\n  }\n  .max-w-12 {\n    max-width: calc(var(--spacing) * 12);\n  }\n  .max-w-70 {\n    max-width: calc(var(--spacing) * 70);\n  }\n  .max-w-xl {\n    max-width: var(--container-xl);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-50 {\n    min-width: calc(var(--spacing) * 50);\n  }\n  .min-w-64 {\n    min-width: calc(var(--spacing) * 64);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .shimmer {\n    --_gradient-width: calc(var(--_spread) + var(--shimmer-track-height) * tan(var(--shimmer-angle)));\n    --_active-distance: calc(var(--shimmer-track-width, 200px) + var(--_gradient-width));\n    --_duration: var(--shimmer-duration, calc(var(--_active-distance) / var(--_speed) / 1px * 1000));\n    --_repeat-delay: var(--shimmer-repeat-delay, calc(20000 / var(--_speed)));\n    --_repeat-delay-px: calc(var(--_repeat-delay) * var(--_active-distance) / var(--_duration));\n    --_xy-offset-px: calc((var(--shimmer-x, 0) + var(--shimmer-y, 0) * tan(var(--shimmer-angle))) * 1px);\n    --_bg-width: calc( 100% + var(--shimmer-track-width, 100%) + var(--_gradient-width) + var(--_repeat-delay-px) );\n    --_position: calc( var(--shimmer-track-width, (100% - var(--_gradient-width) - var(--_repeat-delay-px)) / 2) + var(--_gradient-width) / 2 + var(--_repeat-delay-px) - var(--_xy-offset-px) );\n    &:not(.shimmer-bg) {\n      --_speed: var(--shimmer-speed, 200);\n      --_spread: var(--shimmer-spread, calc(4ch + 80px));\n      --_bg: currentColor;\n      --_fg: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));\n      background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n    &.shimmer-bg {\n      --_speed: var(--shimmer-speed, 1000);\n      --_spread: var(--shimmer-spread, 480px);\n      --_bg: transparent;\n      --_fg: var(--shimmer-color, oklch(from currentColor 0 c h / 0.06));\n    }\n    @media (prefers-color-scheme: dark) {\n      &:not(.shimmer-bg) {\n        --_fg: var(--shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)));\n      }\n      &.shimmer-bg {\n        --_fg: var(--shimmer-color, oklch(from currentColor 0 c h / 0.30));\n      }\n    }\n    @-moz-document url-prefix() {\n      --_duration: var(--shimmer-duration, calc(375000 / var(--_speed)));\n    }\n    --_mix-96: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-96: color-mix(in oklch, var(--_fg), var(--_bg) 96%);\n    }\n    --_mix-83: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-83: color-mix(in oklch, var(--_fg), var(--_bg) 83%);\n    }\n    --_mix-67: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-67: color-mix(in oklch, var(--_fg), var(--_bg) 67%);\n    }\n    --_mix-50: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-50: color-mix(in oklch, var(--_fg), var(--_bg) 50%);\n    }\n    --_mix-33: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-33: color-mix(in oklch, var(--_fg), var(--_bg) 33%);\n    }\n    --_mix-17: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-17: color-mix(in oklch, var(--_fg), var(--_bg) 17%);\n    }\n    --_mix-4: var(--_fg);\n    @supports (color: color-mix(in lab, red, red)) {\n      --_mix-4: color-mix(in oklch, var(--_fg), var(--_bg) 4%);\n    }\n    background:\n      linear-gradient(\n        calc(90deg + var(--shimmer-angle)),\n        var(--_bg) calc(var(--_position) - var(--_spread) * 0.5),\n        var(--_mix-96) calc(var(--_position) - var(--_spread) * 0.44),\n        var(--_mix-83) calc(var(--_position) - var(--_spread) * 0.37),\n        var(--_mix-67) calc(var(--_position) - var(--_spread) * 0.31),\n        var(--_mix-50) calc(var(--_position) - var(--_spread) * 0.25),\n        var(--_mix-33) calc(var(--_position) - var(--_spread) * 0.19),\n        var(--_mix-17) calc(var(--_position) - var(--_spread) * 0.12),\n        var(--_mix-4) calc(var(--_position) - var(--_spread) * 0.06),\n        var(--_fg) var(--_position),\n        var(--_mix-4) calc(var(--_position) + var(--_spread) * 0.06),\n        var(--_mix-17) calc(var(--_position) + var(--_spread) * 0.12),\n        var(--_mix-33) calc(var(--_position) + var(--_spread) * 0.19),\n        var(--_mix-50) calc(var(--_position) + var(--_spread) * 0.25),\n        var(--_mix-67) calc(var(--_position) + var(--_spread) * 0.31),\n        var(--_mix-83) calc(var(--_position) + var(--_spread) * 0.37),\n        var(--_mix-96) calc(var(--_position) + var(--_spread) * 0.44),\n        var(--_bg) calc(var(--_position) + var(--_spread) * 0.5)) 0 0 / var(--_bg-width) 100% no-repeat;\n    animation: tw-shimmer 1s linear 0s infinite backwards;\n    animation-duration: calc((var(--_duration) + var(--_repeat-delay)) * 1ms);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .divide-y {\n    :where(& > :not(:last-child)) {\n      --tw-divide-y-reverse: 0;\n      border-bottom-style: var(--tw-border-style);\n      border-top-style: var(--tw-border-style);\n      border-top-width: calc(1px * var(--tw-divide-y-reverse));\n      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n    }\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded\\! {\n    border-radius: 0.25rem !important;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-tr-sm {\n    border-top-right-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-gray-400 {\n    border-color: var(--color-gray-400);\n  }\n  .border-gray-900 {\n    border-color: var(--color-gray-900);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/30 {\n    background-color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-gray-50 {\n    background-color: var(--color-gray-50);\n  }\n  .bg-gray-100 {\n    background-color: var(--color-gray-100);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-200\\/50 {\n    background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);\n    }\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-gradient-to-b {\n    --tw-gradient-position: to bottom in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-transparent {\n    --tw-gradient-from: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-white {\n    --tw-gradient-to: var(--color-white);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .object-cover\\! {\n    object-fit: cover !important;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .p-8 {\n    padding: calc(var(--spacing) * 8);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n  .pt-16 {\n    padding-top: calc(var(--spacing) * 16);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pr-10 {\n    padding-right: calc(var(--spacing) * 10);\n  }\n  .pr-12 {\n    padding-right: calc(var(--spacing) * 12);\n  }\n  .pr-20 {\n    padding-right: calc(var(--spacing) * 20);\n  }\n  .pb-0 {\n    padding-bottom: calc(var(--spacing) * 0);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-24 {\n    padding-bottom: calc(var(--spacing) * 24);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .leading-5 {\n    --tw-leading: calc(var(--spacing) * 5);\n    line-height: calc(var(--spacing) * 5);\n  }\n  .leading-relaxed {\n    --tw-leading: var(--leading-relaxed);\n    line-height: var(--leading-relaxed);\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-pre-line {\n    white-space: pre-line;\n  }\n  .text-blue-600 {\n    color: var(--color-blue-600);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-gray-800 {\n    color: var(--color-gray-800);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-yellow-500 {\n    color: var(--color-yellow-500);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .no-underline\\! {\n    text-decoration-line: none !important;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-25 {\n    opacity: 25%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-75 {\n    opacity: 75%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-black\\/5 {\n    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n    }\n  }\n  .ring-gray-100 {\n    --tw-ring-color: var(--color-gray-100);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .shimmer-color-gray-300\\/30 {\n    --alpha: 100%;\n    --alpha: calc(30 * 1%);\n    --shimmer-color: oklch(87.2% 0.01 258.338);\n    @supports (color: color-mix(in lab, red, red)) {\n      --shimmer-color: color-mix(in oklab, var(--color-gray-300) var(--alpha, 100%), transparent);\n    }\n  }\n  .shimmer-color-gray-400\\/20 {\n    --alpha: 100%;\n    --alpha: calc(20 * 1%);\n    --shimmer-color: oklch(70.7% 0.022 261.325);\n    @supports (color: color-mix(in lab, red, red)) {\n      --shimmer-color: color-mix(in oklab, var(--color-gray-400) var(--alpha, 100%), transparent);\n    }\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .\\[--shimmer-x\\:60\\] {\n    --shimmer-x: 60;\n  }\n  .\\[--shimmer-y\\:0\\] {\n    --shimmer-y: 0;\n  }\n  .\\[--shimmer-y\\:20\\] {\n    --shimmer-y: 20;\n  }\n  .\\[--shimmer-y\\:40\\] {\n    --shimmer-y: 40;\n  }\n  .\\[--shimmer-y\\:60\\] {\n    --shimmer-y: 60;\n  }\n  .\\[--shimmer-y\\:80\\] {\n    --shimmer-y: 80;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:border-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:border-gray-400 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-gray-400);\n      }\n    }\n  }\n  .hover\\:bg-gray-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-50);\n      }\n    }\n  }\n  .hover\\:bg-gray-100 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-100);\n      }\n    }\n  }\n  .hover\\:bg-gray-800 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-800);\n      }\n    }\n  }\n  .hover\\:text-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-black);\n      }\n    }\n  }\n  .hover\\:text-gray-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-700);\n      }\n    }\n  }\n  .hover\\:text-red-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-red-500);\n      }\n    }\n  }\n  .focus\\:ring-0 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .focus-visible\\:ring-2 {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:ring-white\\/75 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in srgb, #fff 75%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--color-white) 75%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-offset-2 {\n    &:focus-visible {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus-visible\\:ring-offset-blue-300 {\n    &:focus-visible {\n      --tw-ring-offset-color: var(--color-blue-300);\n    }\n  }\n  .active\\:scale-95 {\n    &:active {\n      --tw-scale-x: 95%;\n      --tw-scale-y: 95%;\n      --tw-scale-z: 95%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .data-closed\\:opacity-0 {\n    &[data-closed] {\n      opacity: 0%;\n    }\n  }\n  .sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .sm\\:text-sm {\n    @media (width >= 40rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .md\\:min-w-md {\n    @media (width >= 48rem) {\n      min-width: var(--container-md);\n    }\n  }\n  .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n}\n@property --shimmer-track-height { syntax: "<length>"; inherits: true; initial-value: 200px; }\n@property --shimmer-angle { syntax: "<angle>"; inherits: true; initial-value: 15deg; }\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    border-color: var(--color-gray-200, currentcolor);\n  }\n}\n.editor-paragraph {\n  margin-bottom: 0px !important;\n}\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes tw-shimmer {\n  from {\n    background-position: 100% 0;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    :root,\n    :host {\n      --shimmer-track-height: 200px;\n      --shimmer-angle: 15deg;\n    }\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-space-y-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n');
+
+// src/components/ChatSearch.tsx
+import {
+  useEffect as useEffect4,
+  useState as useState3
+} from "react";
+
+// src/lib/useNlWeb.ts
+import { useState, useCallback, useEffect, useRef } from "react";
+
+// src/lib/parseSchema.ts
+import { z } from "zod";
+
+// src/lib/util.ts
+function abridgedCount(n) {
+  if (n < 1e3) {
+    return n.toString();
+  }
+  if (n < 1e6) {
+    const divided2 = n / 1e3;
+    const formatted2 = divided2 % 1 === 0 ? divided2.toString() : divided2.toFixed(1);
+    return formatted2 + "K";
+  }
+  if (n < 1e9) {
+    const divided2 = n / 1e6;
+    const formatted2 = divided2 % 1 === 0 ? divided2.toString() : divided2.toFixed(1);
+    return formatted2 + "M";
+  }
+  const divided = n / 1e9;
+  const formatted = divided % 1 === 0 ? divided.toString() : divided.toFixed(1);
+  return formatted + "B";
+}
+function filterTruthy(arr) {
+  return arr.filter(Boolean);
+}
+function intersperse(arr, sep) {
+  if (arr.length === 0) return [];
+  return arr.slice(1).reduce((acc, item) => acc.concat([sep, item]), [arr[0]]);
+}
+function shortQuantity(value) {
+  const parsed = tryParseNumber(value);
+  return typeof parsed === "number" && !isNaN(parsed) ? abridgedCount(parsed) : String(value);
+}
+function tryParseNumber(value) {
+  try {
+    return typeof value === "string" ? parseFloat(value) : value;
+  } catch {
+    return value;
+  }
+}
+
+// src/lib/parseSchema.ts
+var ImageObjectSchema = z.object({
+  "@type": z.literal("ImageObject").optional(),
+  "@id": z.string(),
+  url: z.string().optional(),
+  contentUrl: z.string().optional()
+}).passthrough();
+var ImageSchema = z.union([
+  z.string(),
+  ImageObjectSchema,
+  z.array(z.union([z.string(), ImageObjectSchema]))
+]);
+var PersonSchema = z.object({
+  "@type": z.literal("Person").optional(),
+  name: z.string(),
+  url: z.string().optional()
+}).passthrough();
+var OrganizationSchema = z.object({
+  "@type": z.literal("Organization").optional(),
+  name: z.string(),
+  url: z.string().optional()
+}).passthrough();
+var RatingSchema = z.object({
+  "@type": z.literal("Rating").optional(),
+  ratingValue: z.union([z.string(), z.number()]),
+  bestRating: z.union([z.string(), z.number()]).optional(),
+  worstRating: z.union([z.string(), z.number()]).optional()
+}).passthrough();
+var AggregateRatingSchema = z.object({
+  "@type": z.literal("AggregateRating").optional(),
+  ratingValue: z.union([z.string(), z.number()]),
+  bestRating: z.union([z.string(), z.number()]).optional(),
+  worstRating: z.union([z.string(), z.number()]).optional(),
+  ratingCount: z.union([z.string(), z.number()]).optional(),
+  reviewCount: z.union([z.string(), z.number()]).optional()
+}).passthrough();
+var ReviewSchema = z.object({
+  "@type": z.literal("Review").optional(),
+  datePublished: z.string().optional(),
+  reviewBody: z.string().optional(),
+  reviewRating: RatingSchema.optional(),
+  author: z.union([PersonSchema, OrganizationSchema, z.string()]).optional()
+}).passthrough();
+var VideoObjectSchema = z.object({
+  "@type": z.literal("VideoObject").optional(),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  thumbnailUrl: z.string().optional(),
+  uploadDate: z.string().optional(),
+  contentUrl: z.string().optional(),
+  embedUrl: z.string().optional(),
+  duration: z.string().optional()
+}).passthrough();
+function resultTypeIs(result, type) {
+  if (Array.isArray(result["@type"])) {
+    return result["@type"].includes(type);
+  }
+  return result["@type"] == type;
+}
+function getThumbnailCandidates(result) {
+  function filter(candidates) {
+    return deduplicate(filterTruthy(candidates));
+  }
+  if (isArticleResult(result) && typeof result.thumbnailUrl === "string") {
+    const thumbnailUrl = result.thumbnailUrl ? result.thumbnailUrl.startsWith("http") ? result.thumbnailUrl : `https://${result.site}${result.thumbnailUrl}` : null;
+    return filter([thumbnailUrl, getImageUrl(result.image)]);
+  }
+  if (isMovieResult(result)) {
+    return filter([getImageUrl(result.image), result.trailer?.thumbnailUrl]);
+  }
+  return filter([getImageUrl(result.image)]);
+}
+function deduplicate(array) {
+  const seen = /* @__PURE__ */ new Set();
+  return array.filter((item) => {
+    if (seen.has(item)) {
+      return false;
+    }
+    seen.add(item);
+    return true;
+  });
+}
+function getImageUrl(image) {
+  if (!image) {
+    return null;
+  }
+  if (typeof image === "string") {
+    return image;
+  }
+  if (Array.isArray(image)) {
+    if (image.length === 0) {
+      return null;
+    }
+    const firstImage = image[0];
+    if (typeof firstImage === "string") {
+      return firstImage;
+    }
+    return firstImage.contentUrl || firstImage.url || null;
+  }
+  return image.contentUrl || image.url || image["@id"];
+}
+var RecipeSchema = z.object({
+  "@type": z.union([
+    z.literal("Recipe"),
+    z.array(z.string()).refine((arr) => arr.includes("Recipe"), {
+      message: "Array must contain 'Recipe'"
+    })
+  ]),
+  "@id": z.string(),
+  score: z.number(),
+  site: z.string(),
+  name: z.string().optional(),
+  recipeIngredient: z.union([z.array(z.string()), z.string()]).optional(),
+  recipeInstructions: z.any().optional(),
+  recipeYield: z.any().optional(),
+  cookTime: z.string().optional(),
+  prepTime: z.string().optional(),
+  totalTime: z.string().optional(),
+  description: z.string().optional(),
+  image: ImageSchema.optional()
+}).passthrough();
+var ArticleSchema = z.object({
+  "@type": z.union([
+    z.literal("Article"),
+    z.literal("NewsArticle"),
+    z.literal("BlogPosting"),
+    z.array(z.string()).refine(
+      (arr) => arr.includes("Article") || arr.includes("NewsArticle") || arr.includes("BlogPosting"),
+      {
+        message: "Array must contain 'Article', 'NewsArticle', or 'BlogPosting'"
+      }
+    )
+  ]),
+  "@id": z.string(),
+  score: z.number(),
+  site: z.string(),
+  headline: z.string().optional(),
+  description: z.string().optional(),
+  image: ImageSchema.optional(),
+  author: z.any().optional(),
+  publisher: z.any().optional(),
+  datePublished: z.string().optional(),
+  dateModified: z.string().optional(),
+  thumbnailUrl: z.string().optional()
+}).passthrough();
+function isArticleResult(result) {
+  return resultTypeIs(result, "Article") || resultTypeIs(result, "NewsArticle") || resultTypeIs(result, "BlogPosting");
+}
+var MovieSchema = z.object({
+  "@type": z.union([
+    z.literal("Movie"),
+    z.array(z.string()).refine((arr) => arr.includes("Movie"), {
+      message: "Array must contain 'Movie'"
+    })
+  ]),
+  "@id": z.string(),
+  score: z.number(),
+  site: z.string(),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  image: ImageSchema.optional(),
+  url: z.string().optional(),
+  genre: z.array(z.string()).optional(),
+  datePublished: z.string().optional(),
+  director: z.union([PersonSchema, z.array(PersonSchema)]).optional(),
+  actor: z.union([PersonSchema, z.array(PersonSchema)]).optional(),
+  aggregateRating: AggregateRatingSchema.optional(),
+  duration: z.string().optional(),
+  contentRating: z.string().optional(),
+  productionCompany: z.union([OrganizationSchema, z.array(OrganizationSchema)]).optional(),
+  trailer: VideoObjectSchema.optional(),
+  review: z.union([ReviewSchema, z.array(ReviewSchema)]).optional(),
+  sameAs: z.array(z.string()).optional(),
+  // Additional schema.org/Movie properties
+  countryOfOrigin: z.any().optional(),
+  musicBy: z.union([PersonSchema, z.array(PersonSchema)]).optional(),
+  producer: z.union([
+    PersonSchema,
+    OrganizationSchema,
+    z.array(z.union([PersonSchema, OrganizationSchema]))
+  ]).optional()
+}).passthrough();
+function isMovieResult(result) {
+  return resultTypeIs(result, "Movie");
+}
+var SummarySchema = z.object({
+  "@type": z.literal("Summary"),
+  text: z.string()
+}).passthrough();
+function parseSchema(data) {
+  const recipeResult = RecipeSchema.safeParse(data);
+  if (recipeResult.success) {
+    return recipeResult.data;
+  }
+  const movieResult = MovieSchema.safeParse(data);
+  if (movieResult.success) {
+    return movieResult.data;
+  }
+  const articleResult = ArticleSchema.safeParse(data);
+  if (articleResult.success) {
+    return articleResult.data;
+  }
+  const summaryResult = SummarySchema.safeParse(data);
+  if (summaryResult.success) {
+    return summaryResult.data;
+  } else {
+    console.log("failed to parse", data);
+  }
+  return null;
+}
+
+// src/lib/useNlWeb.ts
+function convertParamsToRequest(params, site, numRetrievalResults = 50, maxResults = 9) {
+  const v054Request = {
+    query: {
+      text: params.query,
+      site,
+      max_results: maxResults,
+      num_results: numRetrievalResults
+    },
+    prefer: {
+      streaming: true,
+      response_format: "conv_search",
+      mode: "list, summarize"
+    },
+    meta: {
+      api_version: "0.54",
+      start_num: params.resultOffset || 0
+    }
+  };
+  if (params.userId) {
+    v054Request.meta.user = {
+      id: params.userId
+    };
+  }
+  if (params.remember) {
+    v054Request.meta.remember = true;
+  }
+  if (params.conversationHistory && params.conversationHistory.length > 0) {
+    v054Request.context = {
+      "@type": "ConversationalContext",
+      prev: params.conversationHistory.slice(-5)
+      // Last 5 queries
+    };
+  }
+  return v054Request;
+}
+function useNlWeb(config) {
+  const { endpoint, site, maxResults = 9, numRetrievalResults = 50 } = config;
+  const [state, setState] = useState({
+    results: [],
+    query: null,
+    error: null,
+    rawLogs: [],
+    streamingIndex: -1,
+    loading: false
+  });
+  const abortControllerRef = useRef(null);
+  const sortResultsByScore = useCallback(
+    (results) => {
+      return [...results].sort((a, b) => {
+        const scoreA = a.score || 0;
+        const scoreB = b.score || 0;
+        return scoreB - scoreA;
+      });
+    },
+    []
+  );
+  const handleStreamingResponse = useCallback(
+    async (response) => {
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("Response body is not readable");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      const accumulatedResults = [];
+      let summary = "";
+      let decontextualizedQuery = "";
+      const debugLogs = [];
+      try {
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (!line.trim() || !line.startsWith("data: ")) continue;
+            try {
+              const dataStr = line.slice(6);
+              const data = JSON.parse(dataStr);
+              debugLogs.push(data);
+              if (data._meta) {
+                if (data._meta.response_type === "Failure" && data.error) {
+                  const error = data.error;
+                  throw new Error(`Error (${error.code}): ${error.message}`);
+                } else if (data._meta.decontextualized_query) {
+                  decontextualizedQuery = data._meta.decontextualized_query;
+                  setState((prev) => ({
+                    ...prev,
+                    rawLogs: debugLogs,
+                    decontextualizedQuery
+                  }));
+                }
+              }
+              if (data.results && Array.isArray(data.results)) {
+                data.results.forEach((result) => {
+                  const parsed = parseSchema(result);
+                  if (parsed) {
+                    if (parsed["@type"] == "Summary") {
+                      summary = parsed.text;
+                    } else {
+                      const exists = accumulatedResults.some(
+                        (item) => item["@id"] == parsed["@id"]
+                      );
+                      if (!exists) {
+                        accumulatedResults.push(parsed);
+                      }
+                    }
+                  }
+                });
+                const sortedResults = sortResultsByScore(accumulatedResults);
+                setState((prev) => ({
+                  ...prev,
+                  rawLogs: debugLogs,
+                  summary,
+                  results: sortedResults,
+                  decontextualizedQuery
+                }));
+              }
+              if (data.structuredData && Array.isArray(data.structuredData)) {
+                data.structuredData.forEach((result) => {
+                  const exists = accumulatedResults.some(
+                    (item) => item.url && item.url === result.url || item.name && item.name === result.name
+                  );
+                  if (!exists) {
+                    accumulatedResults.push(result);
+                  }
+                });
+                const sortedResults = sortResultsByScore(accumulatedResults);
+                setState((prev) => ({
+                  ...prev,
+                  rawLogs: debugLogs,
+                  results: sortedResults,
+                  decontextualizedQuery
+                }));
+              }
+            } catch (err) {
+              console.error("Error parsing SSE line:", err, "Line:", line);
+            }
+          }
+        }
+        return {
+          results: sortResultsByScore(accumulatedResults),
+          summary,
+          decontextualizedQuery,
+          rawLogs: debugLogs
+        };
+      } finally {
+        reader.releaseLock();
+      }
+    },
+    [sortResultsByScore]
+  );
+  const search = useCallback(
+    async (params) => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      const query = params.query;
+      const streamingIndex = params.conversationHistory ? params.conversationHistory.length : 0;
+      setState({
+        results: [],
+        query,
+        error: null,
+        rawLogs: [],
+        streamingIndex,
+        resultOffset: params.resultOffset || 0,
+        loading: true
+      });
+      try {
+        const v054Request = convertParamsToRequest(
+          params,
+          site,
+          numRetrievalResults,
+          maxResults
+        );
+        const response = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream"
+          },
+          body: JSON.stringify(v054Request),
+          signal: abortController.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const results = await handleStreamingResponse(response);
+        setState({
+          results: results.results,
+          summary: results.summary,
+          decontextualizedQuery: results.decontextualizedQuery,
+          error: null,
+          query,
+          resultOffset: params.resultOffset,
+          streamingIndex,
+          rawLogs: results.rawLogs,
+          loading: false
+        });
+        return results;
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          const errorMessage = error.message || "An error occurred during search";
+          setState({
+            results: [],
+            query: null,
+            error: errorMessage,
+            rawLogs: [],
+            streamingIndex,
+            loading: false
+          });
+          throw error;
+        }
+        return {
+          results: [],
+          rawLogs: []
+        };
+      }
+    },
+    [endpoint, site, maxResults, handleStreamingResponse]
+  );
+  const cancelSearch = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setState((prev) => ({
+        ...prev,
+        query: null
+      }));
+    }
+  }, []);
+  const clearResults = useCallback(() => {
+    setState({
+      results: [],
+      query: null,
+      error: null,
+      streamingIndex: -1,
+      loading: false
+    });
+  }, []);
+  useEffect(() => {
+    clearResults();
+  }, [site]);
+  return {
+    ...state,
+    search,
+    cancelSearch,
+    clearResults
+  };
+}
+
+// src/components/ChatSearch.tsx
+import { Dialog, DialogPanel, Button as Button2 } from "@headlessui/react";
+import { XMarkIcon, NewspaperIcon } from "@heroicons/react/24/solid";
+import { clsx as clsx2 } from "clsx";
+
+// src/components/SearchQuery.tsx
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { Button } from "@headlessui/react";
+import { MagnifyingGlassIcon, ArrowRightIcon } from "@heroicons/react/24/solid";
+import { clsx } from "clsx";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalIsTextContentEmpty } from "@lexical/react/useLexicalIsTextContentEmpty";
+import {
+  $getRoot,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ENTER_COMMAND,
+  $createParagraphNode,
+  $createTextNode
+} from "lexical";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EnterKeyPlugin({
+  onSubmit,
+  disabled
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect2(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return true;
+        }
+        if (event.shiftKey) {
+          return false;
+        } else {
+          event.preventDefault();
+          onSubmit();
+          return true;
+        }
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, onSubmit, disabled]);
+  return null;
+}
+function InitialValuePlugin({ initQuery }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect2(() => {
+    if (initQuery) {
+      editor.update(() => {
+        const root = $getRoot();
+        root.clear();
+        const paragraph = $createParagraphNode();
+        paragraph.append($createTextNode(initQuery));
+        root.append(paragraph);
+      });
+    }
+  }, [editor, initQuery]);
+  return null;
+}
+function FocusPlugin({
+  onFocusChange
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect2(() => {
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener("focus", () => onFocusChange(true));
+        prevRootElement.removeEventListener("blur", () => onFocusChange(false));
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener("focus", () => onFocusChange(true));
+        rootElement.addEventListener("blur", () => onFocusChange(false));
+      }
+    });
+  }, [editor, onFocusChange]);
+  return null;
+}
+function EditorStatePlugin({
+  editorRef,
+  onEmptyChange,
+  onMultilineChange
+}) {
+  const [editor] = useLexicalComposerContext();
+  const isEmpty = useLexicalIsTextContentEmpty(editor);
+  const initialHeightRef = useRef2(null);
+  const isMultilineRef = useRef2(false);
+  useEffect2(() => {
+    editorRef.current = editor;
+    return () => {
+      editorRef.current = null;
+    };
+  }, [editor, editorRef]);
+  useEffect2(() => {
+    onEmptyChange(isEmpty);
+    if (isEmpty && isMultilineRef.current) {
+      isMultilineRef.current = false;
+      onMultilineChange(false);
+    }
+  }, [isEmpty, onEmptyChange, onMultilineChange]);
+  useEffect2(() => {
+    const rootElement = editor.getRootElement();
+    if (!rootElement) return;
+    if (initialHeightRef.current === null) {
+      initialHeightRef.current = rootElement.offsetHeight;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const currentHeight = entry.contentRect.height;
+        if (initialHeightRef.current !== null && currentHeight >= initialHeightRef.current) {
+          if (!isMultilineRef.current) {
+            isMultilineRef.current = true;
+            onMultilineChange(true);
+          }
+        }
+      }
+    });
+    resizeObserver.observe(rootElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [editor, onMultilineChange]);
+  return null;
+}
+function SearchQuery({
+  initQuery,
+  className,
+  inputClassName,
+  loading,
+  handleSearch,
+  placeholder = "Ask anything..."
+}) {
+  const [isFocused, setIsFocused] = useState2(false);
+  const [isMultiline, setIsMultiline] = useState2(false);
+  const [hasText, setHasText] = useState2(!!initQuery);
+  const editorRef = useRef2(null);
+  const initialConfig = {
+    namespace: "SearchQuery",
+    theme: {
+      paragraph: "editor-paragraph",
+      text: {
+        bold: "editor-text-bold",
+        italic: "editor-text-italic",
+        underline: "editor-text-underline"
+      }
+    },
+    onError: (error) => {
+      console.error(error);
+    }
+  };
+  const handleSubmit = useCallback2(async () => {
+    if (!editorRef.current || loading) return;
+    const query = editorRef.current.getEditorState().read(() => {
+      const root = $getRoot();
+      return root.getTextContent();
+    });
+    if (query.trim()) {
+      await handleSearch(query);
+    }
+  }, [loading, handleSearch]);
+  const handleEmptyChange = useCallback2((isEmpty) => {
+    setHasText(!isEmpty);
+  }, []);
+  const handleMultilineChange = useCallback2((isMultiline2) => {
+    setIsMultiline(isMultiline2);
+  }, []);
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        `flex relative rounded-lg border transition-all duration-200`,
+        isFocused ? "border-gray-400 shadow-md ring-2 ring-gray-100" : "border-gray-200 hover:border-gray-300",
+        isMultiline ? "flex-col items-stretch gap-0" : "flex-row items-center gap-3",
+        className || "bg-white"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "absolute left-3.5 pointer-events-none z-10",
+              isMultiline ? "hidden" : ""
+            ),
+            children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 text-gray-400" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+          /* @__PURE__ */ jsx(
+            PlainTextPlugin,
+            {
+              contentEditable: /* @__PURE__ */ jsx(
+                ContentEditable,
+                {
+                  className: clsx(
+                    "outline-none flex-1 m-0 rounded-md text-base px-4 py-3 text-gray-900",
+                    isMultiline ? "pl-4" : "pl-10 pr-12",
+                    inputClassName,
+                    loading && "opacity-50 cursor-not-allowed"
+                  ),
+                  "aria-placeholder": placeholder,
+                  placeholder: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(
+                        "absolute top-3 text-base text-gray-400 pointer-events-none select-none",
+                        isMultiline ? "left-4" : "left-10 truncate right-10"
+                      ),
+                      children: placeholder
+                    }
+                  )
+                }
+              ),
+              ErrorBoundary: () => null
+            }
+          ),
+          /* @__PURE__ */ jsx(HistoryPlugin, {}),
+          /* @__PURE__ */ jsx(EnterKeyPlugin, { onSubmit: handleSubmit, disabled: loading }),
+          /* @__PURE__ */ jsx(InitialValuePlugin, { initQuery }),
+          /* @__PURE__ */ jsx(FocusPlugin, { onFocusChange: setIsFocused }),
+          /* @__PURE__ */ jsx(
+            EditorStatePlugin,
+            {
+              editorRef,
+              onEmptyChange: handleEmptyChange,
+              onMultilineChange: handleMultilineChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              isMultiline ? "relative flex justify-end p-2" : "absolute right-2 "
+            ),
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: !hasText || loading,
+                className: `p-2 rounded-md transition-all duration-200 ${hasText && !loading ? "bg-black text-white hover:bg-gray-800 active:scale-95" : "bg-gray-100 text-gray-400 cursor-not-allowed"}`,
+                "aria-label": "Submit search",
+                children: loading ? /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "w-4 h-4 animate-spin",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          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"
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/lib/useAutoScroll.ts
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3 } from "react";
+var useAutoScroll = (dependency) => {
+  const containerRef = useRef3(null);
+  const anchorRef = useRef3(null);
+  const shouldScrollRef = useRef3(true);
+  const scrollToAnchor = useCallback3(() => {
+    if (anchorRef.current) {
+      anchorRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  }, []);
+  useEffect3(() => {
+    if (shouldScrollRef.current) {
+      scrollToAnchor();
+    }
+  }, dependency);
+  return { containerRef, anchorRef };
+};
+
+// src/components/ChatSearch.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function decodeHtmlEntities(text) {
+  return text.replace(
+    /&#x([0-9a-fA-F]+);/g,
+    (_, hex) => String.fromCharCode(parseInt(hex, 16))
+  ).replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(parseInt(dec, 10))).replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&nbsp;/g, " ");
+}
+function ResultCardSkeleton() {
+  return /* @__PURE__ */ jsx2("div", { className: "block w-full transition-all overflow-hidden shimmer-container", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx2("div", { className: "h-36 w-full shimmer shimmer-bg shimmer-color-gray-300/30 [--shimmer-x:60] [--shimmer-y:0] bg-gray-100 rounded" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0 space-y-2", children: [
+      /* @__PURE__ */ jsx2("div", { className: "h-4  bg-gray-100 rounded w-3/4" }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx2("div", { className: "h-3 bg-gray-100 rounded w-full" }),
+        /* @__PURE__ */ jsx2("div", { className: "h-3 bg-gray-100 rounded w-5/6" }),
+        /* @__PURE__ */ jsx2("div", { className: "h-3 bg-gray-100 rounded w-5/6" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "h-2  bg-gray-100 rounded w-1/6" })
+    ] })
+  ] }) });
+}
+function ResultCard({ result }) {
+  const srcs = getThumbnailCandidates(result);
+  return /* @__PURE__ */ jsx2(
+    "a",
+    {
+      href: result.url || result.grounding || "#",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "block no-underline! transition-all duration-200 overflow-hidden",
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx2(
+          Thumbnail,
+          {
+            srcs,
+            alt: decodeHtmlEntities(
+              result.name || result.title || "Result image"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "font-medium text-gray-900 text-sm mb-1 line-clamp-2", children: decodeHtmlEntities(
+            result.name || result.title || "Untitled"
+          ) }),
+          /* @__PURE__ */ jsx2(ResultCardDetails, { result }),
+          result.description && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-600 line-clamp-3 mb-2", children: typeof result.description == "string" ? decodeHtmlEntities(result.description) : "" }),
+          result.site && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsx2(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx2(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "truncate", children: result.site })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function ResultCardDetails({ result }) {
+  if (isMovieResult(result)) {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      result.director && /* @__PURE__ */ jsx2("div", { className: "text-xs text-gray-500 font-semibold", children: Array.isArray(result.director) ? result.director.map((d) => d.name).join(", ") : result.director.name }),
+      /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", children: intersperse(
+        [
+          result.aggregateRating?.ratingValue ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-yellow-500", children: "\u2605" }),
+            /* @__PURE__ */ jsx2("span", { className: "text-xs", children: typeof result.aggregateRating.ratingValue === "number" ? result.aggregateRating.ratingValue.toFixed(1) : result.aggregateRating.ratingValue })
+          ] }) : null,
+          result.aggregateRating?.ratingCount ? /* @__PURE__ */ jsxs2("span", { className: "text-xs text-gray-500", children: [
+            shortQuantity(result.aggregateRating.ratingCount),
+            " review",
+            result.aggregateRating.ratingCount != 1 ? "s" : ""
+          ] }) : null
+        ].filter(Boolean),
+        /* @__PURE__ */ jsx2("span", { className: "text-xs text-gray-400", children: "|" })
+      ) })
+    ] });
+  }
+  return null;
+}
+function Thumbnail({
+  srcs,
+  className,
+  ...rest
+}) {
+  const [srcIndex, setSrcIndex] = useState3(0);
+  function advance() {
+    setSrcIndex((srcIndex2) => {
+      const nextIndex = srcIndex2 + 1;
+      return Math.min(nextIndex, srcs.length);
+    });
+  }
+  const srcsExhausted = srcIndex >= srcs.length;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: clsx2(
+        "relative text-xs flex-shrink-0 h-36 rounded",
+        srcsExhausted && "bg-gray-100 flex items-center justify-center",
+        className
+      ),
+      children: [
+        srcsExhausted ? /* @__PURE__ */ jsx2(NewspaperIcon, { className: "absolute size-5 text-gray-400" }) : null,
+        /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: srcs[srcIndex],
+            className: clsx2(
+              "w-full! h-full! object-cover! rounded!",
+              srcsExhausted && "invisible"
+            ),
+            ...rest,
+            onError: advance
+          }
+        )
+      ]
+    }
+  );
+}
+function SummarySkeleton() {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3 w-full md:min-w-md shimmer-container", children: [
+    /* @__PURE__ */ jsx2("div", { className: "h-4 shimmer shimmer-bg shimmer-color-gray-400/20 [--shimmer-x:60] [--shimmer-y:0] bg-gray-200 rounded-md w-full" }),
+    /* @__PURE__ */ jsx2("div", { className: "h-4 shimmer shimmer-bg shimmer-color-gray-400/20 [--shimmer-x:60] [--shimmer-y:20] bg-gray-200 rounded-md w-11/12" }),
+    /* @__PURE__ */ jsx2("div", { className: "h-4 shimmer shimmer-bg shimmer-color-gray-400/20 [--shimmer-x:60] [--shimmer-y:40] bg-gray-200 rounded-md w-full" }),
+    /* @__PURE__ */ jsx2("div", { className: "h-4 shimmer shimmer-bg shimmer-color-gray-400/20 [--shimmer-x:60] [--shimmer-y:60] bg-gray-200 rounded-md w-10/12" }),
+    /* @__PURE__ */ jsx2("div", { className: "h-4 shimmer shimmer-bg shimmer-color-gray-400/20 [--shimmer-x:60] [--shimmer-y:80] bg-gray-200 rounded-md w-full" })
+  ] });
+}
+function SummaryCard({ summary }) {
+  if (summary) {
+    return /* @__PURE__ */ jsx2("div", { className: "text-lg text-gray-800 leading-relaxed", children: summary });
+  }
+  return /* @__PURE__ */ jsx2(SummarySkeleton, {});
+}
+function SearchingFor({
+  query,
+  streaming
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: clsx2(
+        "text-gray-500 gap-1 flex items-center text-sm pb-2 px-2",
+        streaming && "shimmer"
+      ),
+      children: query ? /* @__PURE__ */ jsxs2("span", { className: "text-gray-800 overflow-ellipse", children: [
+        "Searching for: ",
+        query
+      ] }, query) : "Working on it"
+    }
+  );
+}
+function PageButton({
+  page,
+  onClick,
+  activePage,
+  disabled = true
+}) {
+  return /* @__PURE__ */ jsx2(
+    Button2,
+    {
+      disabled,
+      onClick,
+      className: clsx2(
+        "text-sm p-2 size-6 rounded-md transition-colors duration-200 hover:bg-gray-100 flex items-center justify-center",
+        page == activePage ? "text-gray-700" : "text-gray-400",
+        disabled ? "opacity-50 pointer-events-none" : ""
+      ),
+      children: page + 1
+    }
+  );
+}
+function AssistantMessage({
+  summary,
+  results,
+  loading,
+  addResults,
+  followUpQuery,
+  config,
+  anchorRef
+}) {
+  const nlweb = useNlWeb(config);
+  const maxResults = config.maxResults || 50;
+  const numRetrievalResults = config.numRetrievalResults || 50;
+  const pagesAvailable = Math.floor(numRetrievalResults / maxResults);
+  const [page, setPage] = useState3(0);
+  const pageRange = Array.from(
+    { length: pagesAvailable + 1 },
+    (_, index) => index
+  );
+  async function viewMoreResults(pageNumber) {
+    setPage(pageNumber);
+    const offsetToFetch = pageNumber * maxResults;
+    if (results.length <= offsetToFetch) {
+      const response = await nlweb.search({
+        query: followUpQuery,
+        conversationHistory: [],
+        resultOffset: offsetToFetch
+      });
+      await addResults(response.results);
+    }
+  }
+  const pageOffset = page * maxResults;
+  const isStreamingPage = pageOffset == nlweb.resultOffset;
+  const resultsOfPage = isStreamingPage ? nlweb.results : results.slice(pageOffset, (page + 1) * maxResults);
+  const skeletonCount = Math.max(0, 9 - resultsOfPage.length);
+  return /* @__PURE__ */ jsx2("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-3xl flex-1 bg-gray-50 p-6 rounded-lg", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-4 mb-2", children: [
+      /* @__PURE__ */ jsx2(SummaryCard, { summary }),
+      /* @__PURE__ */ jsx2("div", { ref: anchorRef }),
+      /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [
+        resultsOfPage.map((r, idx) => /* @__PURE__ */ jsx2(ResultCard, { result: r }, r.url || r.name || idx)),
+        (loading || nlweb.loading && isStreamingPage) && Array.from({ length: skeletonCount }).map((_, idx) => /* @__PURE__ */ jsx2(ResultCardSkeleton, {}, `skeleton-${idx}`))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex mt-4 -mx-2 items-center gap-2", children: pageRange.map(
+      (p) => results.length >= p * maxResults && (p + 1) * maxResults < numRetrievalResults && /* @__PURE__ */ jsx2(
+        PageButton,
+        {
+          onClick: () => viewMoreResults(p),
+          page: p,
+          activePage: page,
+          disabled: loading
+        },
+        p
+      )
+    ) })
+  ] }) });
+}
+function QueryMessage({ query }) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex justify-end mb-6", children: /* @__PURE__ */ jsx2("div", { className: "max-w-2xl", children: /* @__PURE__ */ jsx2("div", { className: "bg-gray-900 text-white rounded-2xl rounded-tr-sm px-4 py-3 shadow-sm", children: /* @__PURE__ */ jsx2("p", { className: "text-sm leading-relaxed whitespace-pre-line", children: query }) }) }) });
+}
+function ChatEntry({
+  index,
+  query,
+  loading,
+  decontextualizedQuery,
+  summary,
+  results,
+  config,
+  addResults,
+  anchorRef
+}) {
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    index > 0 ? /* @__PURE__ */ jsx2(QueryMessage, { query }) : null,
+    index > 0 ? /* @__PURE__ */ jsx2(SearchingFor, { streaming: loading, query: decontextualizedQuery }) : null,
+    results.length > 0 || loading ? /* @__PURE__ */ jsx2(
+      AssistantMessage,
+      {
+        anchorRef,
+        summary,
+        results,
+        loading,
+        followUpQuery: decontextualizedQuery || query,
+        addResults,
+        config
+      }
+    ) : /* @__PURE__ */ jsx2("div", { className: "flex max-w-3xl text-base text-gray-500 justify-start bg-gray-50 p-6 rounded-lg", children: "No results found" })
+  ] }, `${query}-${index}`);
+}
+function ChatResults({
+  nlweb,
+  config,
+  searches,
+  addResults,
+  anchorRef
+}) {
+  const combinedStreamedResults = searches.length - 1 == nlweb.streamingIndex && searches[nlweb.streamingIndex]?.response ? [
+    ...nlweb.results,
+    ...searches[nlweb.streamingIndex].response.results.slice(
+      nlweb.results.length
+    )
+  ] : nlweb.results;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4 py-6", children: [
+    searches.map(
+      (r, idx) => idx != nlweb.streamingIndex && /* @__PURE__ */ jsx2(
+        ChatEntry,
+        {
+          loading: false,
+          index: idx,
+          query: r.query,
+          results: r.response.results,
+          summary: r.response.summary,
+          decontextualizedQuery: r.response.decontextualizedQuery,
+          config,
+          addResults: (results) => addResults(r.id || "", results)
+        },
+        `${r.query}-${idx}`
+      )
+    ),
+    nlweb.query && /* @__PURE__ */ jsx2(
+      ChatEntry,
+      {
+        index: nlweb.streamingIndex,
+        query: nlweb.query,
+        results: combinedStreamedResults,
+        summary: nlweb.summary,
+        decontextualizedQuery: nlweb.decontextualizedQuery,
+        loading: nlweb.loading,
+        anchorRef,
+        config,
+        addResults: (r) => addResults(searches[nlweb.streamingIndex].id || "", r)
+      },
+      `${nlweb.query}-${nlweb.streamingIndex}`
+    )
+  ] });
+}
+function ChatSearch({
+  searches,
+  addSearch,
+  addResults,
+  startSession,
+  endSession,
+  nlweb,
+  config,
+  children,
+  sidebar,
+  sessionId = "NLWEB_DEFAULT_SESSION"
+}) {
+  const { anchorRef } = useAutoScroll([nlweb.query]);
+  const [searchOpen, setSearchOpen] = useState3(searches.length > 0);
+  function closeSearch() {
+    setSearchOpen(false);
+    if (endSession) {
+      endSession();
+    }
+  }
+  async function handleSearch(query, isRoot) {
+    let response;
+    let sId = sessionId;
+    if (isRoot) {
+      sId = await startSession(query) || sessionId;
+      setSearchOpen(true);
+      response = await nlweb.search({
+        query
+      });
+    } else {
+      response = await nlweb.search({
+        query,
+        conversationHistory: searches.map((r) => r.query)
+      });
+    }
+    if (sId) {
+      const search = { query, response, sessionId: sId };
+      await addSearch(search);
+    }
+  }
+  useEffect4(() => {
+    if (searches.length > 0 && !searchOpen) {
+      setSearchOpen(true);
+    }
+  }, [searches]);
+  const rootQuery = searches.length > 0 ? searches[0].query : nlweb.query;
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx2("div", { className: "mb-6 min-w-50 max-h-12 relative z-30", children: /* @__PURE__ */ jsx2(
+      SearchQuery,
+      {
+        loading: nlweb.loading,
+        handleSearch: (q) => handleSearch(q, true)
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(
+      Dialog,
+      {
+        className: "relative z-50",
+        open: searchOpen,
+        onClose: closeSearch,
+        children: /* @__PURE__ */ jsxs2("div", { className: "fixed bg-white inset-0 w-screen h-screen overflow-hidden", children: [
+          /* @__PURE__ */ jsx2(
+            Button2,
+            {
+              onClick: closeSearch,
+              className: "z-50 text-gray-500 hover:text-black absolute right-6 top-4",
+              children: /* @__PURE__ */ jsx2(XMarkIcon, { className: "size-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            DialogPanel,
+            {
+              className: "w-full h-screen flex items-stretch overflow-hidden",
+              children: [
+                sidebar,
+                /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+                  children,
+                  /* @__PURE__ */ jsxs2("div", { className: "relative flex-1 overflow-hidden flex flex-col", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4 pt-16 pb-24", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-7xl mx-auto", children: [
+                      /* @__PURE__ */ jsx2("div", { className: "mb-6 max-w-xl mx-auto", children: /* @__PURE__ */ jsx2(
+                        SearchQuery,
+                        {
+                          className: "bg-gray-50",
+                          loading: nlweb.loading,
+                          handleSearch: (q) => handleSearch(q, true),
+                          initQuery: rootQuery
+                        },
+                        rootQuery || "empty-search"
+                      ) }),
+                      /* @__PURE__ */ jsx2(
+                        ChatResults,
+                        {
+                          nlweb,
+                          searches,
+                          addResults,
+                          config,
+                          anchorRef
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsx2("div", { className: "absolute pointer-events-none bottom-0 top-[calc(100%_-_100px)] bg-gradient-to-b from-transparent to-white left-0 right-0" }),
+                    /* @__PURE__ */ jsx2("div", { className: "absolute bottom-8 left-4 right-4", children: /* @__PURE__ */ jsx2("div", { className: "max-w-xl mx-auto", children: /* @__PURE__ */ jsx2(
+                      SearchQuery,
+                      {
+                        loading: nlweb.loading,
+                        handleSearch: (q) => handleSearch(q, false),
+                        inputClassName: "max-h-[60vh] overflow-y-auto",
+                        className: "shadow-xl bg-white",
+                        placeholder: "Enter a follow up query"
+                      },
+                      nlweb.query
+                    ) }) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/HistorySidebar.tsx
+import { Button as Button3 } from "@headlessui/react";
+import {
+  XMarkIcon as XMarkIcon2,
+  PencilSquareIcon,
+  Bars3Icon
+} from "@heroicons/react/24/solid";
+import { Transition } from "@headlessui/react";
+import { useState as useState4 } from "react";
+import { clsx as clsx3 } from "clsx";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SiteBadge({ site }) {
+  const siteParts = site.split(".");
+  return /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 flex gap-2 items-center text-xs font-medium text-gray-400 uppercase", children: siteParts[0] });
+}
+function SessionButton({
+  session,
+  onSelect,
+  onDelete,
+  selected = false
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx3(
+        "flex group hover:bg-gray-100 rounded-md overflow-hidden",
+        selected ? "bg-gray-200/50" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(
+          Button3,
+          {
+            onClick: onSelect,
+            className: "w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md truncate",
+            children: session.query
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Button3,
+          {
+            onClick: onDelete,
+            className: "opacity-0 group-hover:opacity-100 px-2 flex items-center justify-center text-gray-400 hover:text-red-500 rounded-md transition-all",
+            children: /* @__PURE__ */ jsx3(XMarkIcon2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function HistorySidebar({
+  selected,
+  sessions,
+  onSelect,
+  onDelete,
+  onCreate
+}) {
+  const [isOpen, setIsOpen] = useState4(sessions.length > 1);
+  const groupedSessions = sessions.reduce((acc, session) => {
+    const site = session.backend.site;
+    if (!acc[site]) {
+      acc[site] = [];
+    }
+    acc[site].push(session);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: clsx3(
+        "flex-1 flex flex-col  relative z-50 transition-all",
+        isOpen ? "max-w-70" : "max-w-12"
+      ),
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col flex-1 overflow-hidden", children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: clsx3(
+              "absolute right-2 top-0 h-12 flex items-center",
+              !isOpen ? "left-2 flex justify-center" : ""
+            ),
+            children: /* @__PURE__ */ jsx3(
+              Button3,
+              {
+                onClick: () => setIsOpen(!isOpen),
+                className: "text-gray-400 hover:text-gray-700 transition-colors rounded-lg w-7 h-7 hover:bg-gray-50 flex items-center justify-center",
+                children: /* @__PURE__ */ jsx3(Bars3Icon, { className: "size-5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: clsx3(
+              "border-r min-w-64 bg-gray-50 overflow-y-auto",
+              "flex-1 data-closed:opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: clsx3(
+                    "h-12 items-center font-medium  p-4 px-5 pb-0 pointer-events-none text-xs text-gray-500 transition-opacity",
+                    isOpen ? "opacity-100" : "opacity-0"
+                  ),
+                  children: "Chats"
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: "px-2", children: /* @__PURE__ */ jsxs3(
+                Button3,
+                {
+                  onClick: onCreate,
+                  className: clsx3(
+                    "flex items-center gap-2 text-left px-2 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md truncate",
+                    isOpen ? "w-full" : ""
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(PencilSquareIcon, { className: "size-4 text-gray-400" }),
+                    /* @__PURE__ */ jsx3(Transition, { show: isOpen, children: /* @__PURE__ */ jsx3("div", { children: "New Chat" }) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(Transition, { show: isOpen, children: /* @__PURE__ */ jsxs3("div", { className: "divide-y", children: [
+                Object.entries(groupedSessions).map(([site, siteSessions]) => /* @__PURE__ */ jsxs3("div", { className: "p-2", children: [
+                  /* @__PURE__ */ jsx3(SiteBadge, { site }),
+                  /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: siteSessions.map((session) => /* @__PURE__ */ jsx3(
+                    SessionButton,
+                    {
+                      selected: session.sessionId == selected,
+                      session,
+                      onSelect: () => onSelect(session),
+                      onDelete: () => onDelete(session.sessionId)
+                    },
+                    session.sessionId
+                  )) })
+                ] }, site)),
+                sessions.length === 0 && /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-sm text-gray-500 text-center", children: "No search history yet" })
+              ] }) })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/DebugTools.tsx
+import { BugAntIcon } from "@heroicons/react/24/solid";
+import { useState as useState5 } from "react";
+import {
+  Dialog as Dialog2,
+  DialogPanel as DialogPanel2,
+  Button as Button4,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels
+} from "@headlessui/react";
+import { clsx as clsx4 } from "clsx";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function translateResultsToNlWebRequests(streamingState, results, config) {
+  const turns = [];
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i];
+    const params = {
+      query: result.query,
+      conversationHistory: i > 0 ? results.slice(0, i).map((r) => r.query) : void 0
+    };
+    const request = convertParamsToRequest(
+      params,
+      config.site,
+      config.numRetrievalResults,
+      config.maxResults
+    );
+    turns.push({
+      request,
+      response: result.response.rawLogs || []
+    });
+  }
+  if (streamingState.query) {
+    const streamingParams = {
+      query: streamingState.query,
+      conversationHistory: results.length > 0 ? results.map((r) => r.query) : void 0
+    };
+    const streamingRequest = convertParamsToRequest(
+      streamingParams,
+      config.site,
+      config.numRetrievalResults,
+      config.maxResults
+    );
+    turns.push({
+      request: streamingRequest,
+      response: streamingState.rawLogs || []
+    });
+  }
+  return turns;
+}
+function CodeBlock({ code }) {
+  const [copied, setCopied] = useState5(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "relative overflow-hidden", children: [
+    /* @__PURE__ */ jsx4(
+      Button4,
+      {
+        onClick: handleCopy,
+        className: "absolute top-0 right-0 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:border-gray-400 transition-colors",
+        children: copied ? "Copied!" : "Copy"
+      }
+    ),
+    /* @__PURE__ */ jsx4("pre", { className: "overflow-auto text-gray-500 text-sm pr-20", children: code })
+  ] });
+}
+function MessagesDialog({
+  isOpen,
+  onClose,
+  searches,
+  streamingState,
+  config
+}) {
+  return /* @__PURE__ */ jsxs4(Dialog2, { open: isOpen, onClose, className: "relative z-50", children: [
+    /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 bg-black/30", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx4(DialogPanel2, { className: "flex flex-col bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[80vh] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxs4(TabGroup, { className: "flex flex-col flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx4(TabList, { className: "flex border-b bg-gray-50", children: /* @__PURE__ */ jsx4(
+        Tab,
+        {
+          className: ({ selected }) => clsx4(
+            "px-6 py-3 text-sm font-medium outline-none transition-colors",
+            selected ? "border-b-2 border-gray-900 text-gray-900" : "text-gray-500 hover:text-gray-700"
+          ),
+          children: "Raw Messages"
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(TabPanels, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx4(TabPanel, { className: "p-6", children: /* @__PURE__ */ jsx4(
+        CodeBlock,
+        {
+          code: JSON.stringify(
+            translateResultsToNlWebRequests(
+              streamingState,
+              searches,
+              config
+            ),
+            null,
+            2
+          )
+        }
+      ) }) })
+    ] }) }) })
+  ] });
+}
+function DebugTool({
+  searches,
+  streamingState,
+  config
+}) {
+  const [messagesOpen, setMessagesOpen] = useState5(false);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
+      Button4,
+      {
+        onClick: () => setMessagesOpen(true),
+        className: "flex bg-white items-center gap-2 ml-auto text-gray-600 hover:bg-gray-100 p-3 py-2 rounded-md text-sm",
+        children: [
+          /* @__PURE__ */ jsx4(BugAntIcon, { className: "size-4 text-gray-500" }),
+          "JSON"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      MessagesDialog,
+      {
+        isOpen: messagesOpen,
+        onClose: () => setMessagesOpen(false),
+        searches,
+        streamingState,
+        config
+      }
+    )
+  ] });
+}
+
+// src/components/SiteDropdown.tsx
+import { useState as useState6 } from "react";
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions
+} from "@headlessui/react";
+import {
+  CheckIcon,
+  GlobeAltIcon,
+  ChevronUpDownIcon,
+  StarIcon
+} from "@heroicons/react/20/solid";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SiteDropdown({
+  sites,
+  selected,
+  onSelect,
+  placeholder = "Select a site..."
+}) {
+  const [query, setQuery] = useState6("");
+  const filteredSites = query === "" ? sites : sites.filter((site) => {
+    return site.url.toLowerCase().includes(query.toLowerCase());
+  });
+  return /* @__PURE__ */ jsx5(Combobox, { value: selected.url, onChange: onSelect, children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center w-full cursor-default overflow-hidden rounded-lg bg-white text-left border focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm", children: [
+      /* @__PURE__ */ jsx5(
+        ComboboxInput,
+        {
+          className: "w-full pl-8 rounded-md text-sm border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0",
+          displayValue: (site) => site || "",
+          onChange: (event) => setQuery(event.target.value),
+          placeholder
+        }
+      ),
+      /* @__PURE__ */ jsx5(ComboboxButton, { className: "absolute inset-y-0 left-0 flex items-center pl-2", children: /* @__PURE__ */ jsx5(GlobeAltIcon, { className: "text-gray-400 size-4" }) }),
+      /* @__PURE__ */ jsx5(ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsx5(ChevronUpDownIcon, { className: "text-gray-400 size-4" }) })
+    ] }),
+    /* @__PURE__ */ jsxs5(ComboboxOptions, { className: "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm z-10", children: [
+      filteredSites.map((site) => /* @__PURE__ */ jsx5(
+        ComboboxOption,
+        {
+          className: ({ focus }) => `relative text-sm cursor-default select-none py-2 pl-10 pr-4 ${focus ? "bg-blue-600 text-white" : "text-gray-900"}`,
+          value: site.url,
+          children: ({ selected: selected2, focus }) => /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: `block truncate ${selected2 ? "font-medium" : "font-normal"}`,
+                children: site.url
+              }
+            ),
+            selected2 ? /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: `absolute inset-y-0 left-0 flex items-center pl-3 ${focus ? "text-white" : "text-blue-600"}`,
+                children: /* @__PURE__ */ jsx5(CheckIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+              }
+            ) : null,
+            site.featured ? /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: `absolute inset-y-0 right-0 flex items-center pr-3 ${focus ? "text-white" : "text-blue-600"}`,
+                children: /* @__PURE__ */ jsx5(StarIcon, { className: "size-5 text-yellow-500" })
+              }
+            ) : null
+          ] })
+        },
+        site.url
+      )),
+      query !== "" && !sites.some(
+        (site) => site.url.toLowerCase() === query.toLowerCase()
+      ) && /* @__PURE__ */ jsx5(
+        ComboboxOption,
+        {
+          className: ({ focus }) => `relative text-sm cursor-default select-none py-2 pl-10 pr-4 ${focus ? "bg-blue-600 text-white" : "text-gray-900"}`,
+          value: query,
+          children: ({ focus }) => /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              className: `block truncate ${focus ? "font-medium" : "font-normal"}`,
+              children: [
+                'Use "',
+                query,
+                '"'
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/lib/useHistory.ts
+import { useLiveQuery } from "dexie-react-hooks";
+
+// src/lib/db.ts
+import { Dexie } from "dexie";
+var db = new Dexie("ChatHistory");
+db.version(1).stores({
+  messages: "++id, sessionId",
+  // primary key "id" (for the runtime!),
+  sessions: "sessionId, created, updated"
+});
+
+// src/lib/useHistory.ts
+function useSearchSessions() {
+  const sessions = useLiveQuery(
+    () => db.sessions.orderBy("updated").reverse().toArray(),
+    []
+  ) ?? [];
+  async function startSession(sessionId, query, backend) {
+    await db.transaction("rw", db.messages, db.sessions, async () => {
+      const duplicates = sessions.filter((s) => s.query == query);
+      for (const s of duplicates) {
+        await db.messages.where("sessionId").equals(s.sessionId).delete();
+        db.sessions.delete(s.sessionId);
+      }
+      const created = /* @__PURE__ */ new Date();
+      const updated = /* @__PURE__ */ new Date();
+      await db.sessions.put({ sessionId, query, backend, created, updated });
+    });
+  }
+  async function deleteSession(sessionId) {
+    await db.transaction("rw", db.messages, db.sessions, async () => {
+      await db.messages.where("sessionId").equals(sessionId).delete();
+      db.sessions.delete(sessionId);
+    });
+  }
+  return {
+    sessions,
+    startSession,
+    deleteSession
+  };
+}
+function useSearchSession(sessionId) {
+  const queryResults = useLiveQuery(async () => {
+    if (!sessionId) return [];
+    return await db.messages.where("sessionId").equals(sessionId).sortBy("id");
+  }, [sessionId]) ?? [];
+  async function addSearch(result) {
+    await db.transaction("rw", db.messages, db.sessions, async () => {
+      db.sessions.update(result.sessionId, {
+        updated: /* @__PURE__ */ new Date()
+      });
+      db.messages.add(result);
+    });
+  }
+  async function addResults(id, results) {
+    await db.transaction("rw", db.messages, db.sessions, async () => {
+      const currMessage = await db.messages.get(id);
+      if (currMessage) {
+        db.sessions.update(currMessage.sessionId, {
+          updated: /* @__PURE__ */ new Date()
+        });
+        db.messages.update(id, {
+          ...currMessage,
+          response: {
+            ...currMessage.response,
+            results: [...currMessage.response.results, ...results]
+          }
+        });
+      }
+    });
+  }
+  return {
+    searches: queryResults,
+    addSearch,
+    addResults
+  };
+}
+export {
+  ChatSearch,
+  DebugTool,
+  HistorySidebar,
+  SiteDropdown,
+  useNlWeb,
+  useSearchSession,
+  useSearchSessions
+};
+//# sourceMappingURL=index.mjs.map