@usecrow/ui 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React3, { createContext, forwardRef, useRef, useCallback, useEffect, useContext, useState, useMemo, useLayoutEffect } from 'react';
1
+ import React3, { createContext, forwardRef, useEffect, useRef, useCallback, useContext, useState, useMemo, useLayoutEffect } from 'react';
2
2
  import { motion, AnimatePresence } from 'framer-motion';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { Square, ArrowUp, ChevronDown, Check, MessageCircle, Plus, History, ChevronUp, Brain, ChevronRight, Loader2, X } from 'lucide-react';
@@ -6,6 +6,26 @@ import ReactMarkdown from 'react-markdown';
6
6
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
7
7
  import { CrowClient } from '@usecrow/client';
8
8
 
9
+ // src/styles/inject.ts
10
+ var STYLE_ID = "crow-ui-styles";
11
+ var CSS_CONTENT = `*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
12
+
13
+ /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.crow-pointer-events-none{pointer-events:none}.crow-pointer-events-auto{pointer-events:auto}.crow-fixed{position:fixed}.crow-absolute{position:absolute}.crow-relative{position:relative}.crow-sticky{position:sticky}.crow-bottom-0{bottom:0}.crow-bottom-full{bottom:100%}.crow-left-0{left:0}.crow-right-0{right:0}.crow-top-0{top:0}.crow-z-50{z-index:50}.crow-z-\\[999999\\]{z-index:999999}.crow-m-0{margin:0}.crow-my-1{margin-top:.25rem}.crow-mb-1,.crow-my-1{margin-bottom:.25rem}.crow-mb-2{margin-bottom:.5rem}.crow-mb-3{margin-bottom:.75rem}.crow-ml-0{margin-left:0}.crow-ml-0\\.5{margin-left:.125rem}.crow-ml-2{margin-left:.5rem}.crow-ml-4{margin-left:1rem}.crow-mt-0{margin-top:0}.crow-mt-0\\.5{margin-top:.125rem}.crow-mt-1{margin-top:.25rem}.crow-mt-2{margin-top:.5rem}.crow-mt-auto{margin-top:auto}.crow-inline-block{display:inline-block}.crow-flex{display:flex}.crow-inline-flex{display:inline-flex}.crow-h-10{height:2.5rem}.crow-h-12{height:3rem}.crow-h-2{height:.5rem}.crow-h-3{height:.75rem}.crow-h-3\\.5{height:.875rem}.crow-h-4{height:1rem}.crow-h-7{height:1.75rem}.crow-h-8{height:2rem}.crow-h-full{height:100%}.crow-max-h-32{max-height:8rem}.crow-max-h-\\[200px\\]{max-height:200px}.crow-min-h-0{min-height:0}.crow-min-h-\\[32px\\]{min-height:32px}.crow-w-0{width:0}.crow-w-0\\.5{width:.125rem}.crow-w-2{width:.5rem}.crow-w-3{width:.75rem}.crow-w-3\\.5{width:.875rem}.crow-w-4{width:1rem}.crow-w-7{width:1.75rem}.crow-w-8{width:2rem}.crow-w-full{width:100%}.crow-min-w-0{min-width:0}.crow-min-w-\\[180px\\]{min-width:180px}.crow-max-w-\\[80\\%\\]{max-width:80%}.crow-max-w-\\[90\\%\\]{max-width:90%}.crow-max-w-full{max-width:100%}.crow-flex-1{flex:1 1 0%}.crow-flex-shrink-0{flex-shrink:0}.crow-rotate-180{--tw-rotate:180deg}.crow-rotate-180,.crow-scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.crow-scale-100{--tw-scale-x:1;--tw-scale-y:1}.crow-scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.crow-animate-fade-in{animation:crow-fadeIn .2s ease-out}.crow-animate-pulse{animation:crow-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.crow-animate-slide-up{animation:crow-slideUp .3s ease-out}@keyframes crow-spin{to{transform:rotate(1turn)}}.crow-animate-spin{animation:crow-spin 1s linear infinite}.crow-cursor-default{cursor:default}.crow-cursor-not-allowed{cursor:not-allowed}.crow-cursor-pointer{cursor:pointer}.crow-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.crow-resize-none{resize:none}.crow-list-decimal{list-style-type:decimal}.crow-list-disc{list-style-type:disc}.crow-flex-row{flex-direction:row}.crow-flex-col{flex-direction:column}.crow-items-start{align-items:flex-start}.crow-items-end{align-items:flex-end}.crow-items-center{align-items:center}.crow-justify-start{justify-content:flex-start}.crow-justify-end{justify-content:flex-end}.crow-justify-center{justify-content:center}.crow-justify-between{justify-content:space-between}.crow-gap-1{gap:.25rem}.crow-gap-1\\.5{gap:.375rem}.crow-gap-2{gap:.5rem}.crow-gap-3{gap:.75rem}.crow-gap-4{gap:1rem}.crow-gap-6{gap:1.5rem}.crow-space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.crow-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.crow-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.crow-space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.crow-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.crow-overflow-hidden{overflow:hidden}.crow-overflow-visible{overflow:visible}.crow-overflow-x-auto{overflow-x:auto}.crow-overflow-y-auto{overflow-y:auto}.crow-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crow-whitespace-pre-wrap{white-space:pre-wrap}.crow-break-words{overflow-wrap:break-word}.crow-rounded{border-radius:.25rem}.crow-rounded-2xl{border-radius:1rem}.crow-rounded-3xl{border-radius:1.5rem}.crow-rounded-full{border-radius:9999px}.crow-rounded-lg{border-radius:.5rem}.crow-rounded-md{border-radius:.375rem}.crow-rounded-xl{border-radius:.75rem}.crow-border{border-width:1px}.crow-border-b{border-bottom-width:1px}.crow-border-l{border-left-width:1px}.crow-border-l-2{border-left-width:2px}.crow-border-r{border-right-width:1px}.crow-border-t{border-top-width:1px}.crow-border-none{border-style:none}.crow-border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.crow-border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.crow-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.crow-border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.crow-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.crow-bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.crow-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.crow-bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.crow-bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.crow-bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.crow-bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.crow-bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.crow-bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.crow-bg-transparent{background-color:transparent}.crow-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.crow-p-0{padding:0}.crow-p-1{padding:.25rem}.crow-p-1\\.5{padding:.375rem}.crow-p-2{padding:.5rem}.crow-p-3{padding:.75rem}.crow-p-4{padding:1rem}.crow-p-6{padding:1.5rem}.crow-px-1{padding-left:.25rem;padding-right:.25rem}.crow-px-2{padding-left:.5rem;padding-right:.5rem}.crow-px-3{padding-left:.75rem;padding-right:.75rem}.crow-px-4{padding-left:1rem;padding-right:1rem}.crow-px-6{padding-left:1.5rem;padding-right:1.5rem}.crow-py-0{padding-top:0;padding-bottom:0}.crow-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.crow-py-1{padding-top:.25rem;padding-bottom:.25rem}.crow-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.crow-py-2{padding-top:.5rem;padding-bottom:.5rem}.crow-py-3{padding-top:.75rem;padding-bottom:.75rem}.crow-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.crow-py-8{padding-top:2rem;padding-bottom:2rem}.crow-pb-2{padding-bottom:.5rem}.crow-pl-3{padding-left:.75rem}.crow-pl-4{padding-left:1rem}.crow-pl-5{padding-left:1.25rem}.crow-pr-4{padding-right:1rem}.crow-pt-1{padding-top:.25rem}.crow-text-left{text-align:left}.crow-text-center{text-align:center}.crow-text-right{text-align:right}.crow-align-text-bottom{vertical-align:text-bottom}.crow-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.crow-text-base{font-size:1rem;line-height:1.5rem}.crow-text-lg{font-size:1.125rem;line-height:1.75rem}.crow-text-sm{font-size:.875rem;line-height:1.25rem}.crow-text-xs{font-size:.75rem;line-height:1rem}.crow-font-bold{font-weight:700}.crow-font-medium{font-weight:500}.crow-font-semibold{font-weight:600}.crow-uppercase{text-transform:uppercase}.crow-leading-relaxed{line-height:1.625}.crow-tracking-wide{letter-spacing:.025em}.crow-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.crow-text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.crow-text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.crow-text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.crow-text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.crow-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.crow-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.crow-text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.crow-text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.crow-text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.crow-text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.crow-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.crow-underline{text-decoration-line:underline}.crow-opacity-0{opacity:0}.crow-opacity-100{opacity:1}.crow-opacity-50{opacity:.5}.crow-opacity-60{opacity:.6}.crow-shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.crow-shadow-2xl,.crow-shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.crow-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.crow-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.crow-backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.crow-backdrop-blur-md,.crow-backdrop-blur-sm{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.crow-backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.crow-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.crow-duration-150{transition-duration:.15s}.crow-duration-200{transition-duration:.2s}.crow-duration-300{transition-duration:.3s}.crow-duration-500{transition-duration:.5s}.crow-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.crow-animate-fade-in{animation:crow-fadeIn .2s ease-out}.crow-animate-slide-up{animation:crow-slideUp .3s ease-out}.crow-animate-pulse{animation:crow-pulse 1.5s ease-in-out infinite}.crow-animation-delay-100{animation-delay:.1s}.crow-animation-delay-200{animation-delay:.2s}@keyframes crow-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes crow-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes crow-pulse{0%,to{opacity:1}50%{opacity:.4}}.crow-overflow-y-auto::-webkit-scrollbar{width:6px}.crow-overflow-y-auto::-webkit-scrollbar-track{background:transparent}.crow-overflow-y-auto::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.crow-overflow-y-auto::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.crow-focus-visible\\:crow-outline-none:focus-visible{outline:none}.crow-focus-visible\\:crow-ring-2:focus-visible{box-shadow:0 0 0 2px var(--crow-primary,#6366f1)}:root{--crow-primary:#6366f1;--crow-primary-dark:#4f46e5;--crow-secondary:#f1f5f9;--crow-accent:#10b981}@media (prefers-color-scheme:dark){:root{--crow-primary:#818cf8;--crow-primary-dark:#6366f1}}.placeholder\\:crow-text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\\:crow-text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.last\\:crow-mb-0:last-child{margin-bottom:0}.last\\:crow-border-0:last-child{border-width:0}.hover\\:crow-scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:crow-bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:crow-bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\\:crow-bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\\:crow-bg-white\\/80:hover{background-color:hsla(0,0%,100%,.8)}.hover\\:crow-text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\\:crow-text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\\:crow-text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.hover\\:crow-opacity-100:hover{opacity:1}.focus\\:crow-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:crow-ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:crow-ring-0:focus,.focus\\:crow-ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:crow-ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:crow-ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\\:crow-outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:crow-ring-0:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\\:crow-pointer-events-none:disabled{pointer-events:none}.disabled\\:crow-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:crow-opacity-50:disabled{opacity:.5}`;
14
+ var injected = false;
15
+ function injectStyles() {
16
+ if (injected || typeof document === "undefined") return;
17
+ if (document.getElementById(STYLE_ID)) {
18
+ injected = true;
19
+ return;
20
+ }
21
+ const style = document.createElement("style");
22
+ style.id = STYLE_ID;
23
+ style.textContent = CSS_CONTENT;
24
+ document.head.appendChild(style);
25
+ injected = true;
26
+ }
27
+ injectStyles();
28
+
9
29
  // src/utils.ts
10
30
  var cn = (...classes) => classes.filter(Boolean).join(" ");
11
31
  var formatTime = (date) => date.toLocaleTimeString("en-US", {
@@ -641,7 +661,10 @@ var DEFAULT_WIDGET_STYLES = {
641
661
  typography: {
642
662
  fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
643
663
  fontSize: 14,
644
- headerFontSize: 16
664
+ headerFontSize: 16,
665
+ fontWeight: 400,
666
+ lineHeight: 1.5,
667
+ letterSpacing: 0
645
668
  },
646
669
  // ═══════════════════════════════════════════════════════════
647
670
  // ANIMATIONS
@@ -656,7 +679,6 @@ var DEFAULT_WIDGET_STYLES = {
656
679
  dimensions: {
657
680
  width: 400,
658
681
  maxHeight: 600,
659
- previewHeight: 700,
660
682
  messagesMaxHeight: 350,
661
683
  borderRadius: 24,
662
684
  padding: 20
@@ -719,7 +741,10 @@ var DEFAULT_COPILOT_STYLES = {
719
741
  typography: {
720
742
  fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
721
743
  fontSize: 14,
722
- headerFontSize: 16
744
+ headerFontSize: 16,
745
+ fontWeight: 400,
746
+ lineHeight: 1.5,
747
+ letterSpacing: 0
723
748
  },
724
749
  // ═══════════════════════════════════════════════════════════
725
750
  // ANIMATIONS
@@ -839,6 +864,9 @@ function stylesToCSSVariables(styles2) {
839
864
  "--crow-font-family": styles2.typography.fontFamily,
840
865
  "--crow-font-size": `${styles2.typography.fontSize}px`,
841
866
  "--crow-header-font-size": `${styles2.typography.headerFontSize}px`,
867
+ "--crow-font-weight": `${styles2.typography.fontWeight}`,
868
+ "--crow-line-height": `${styles2.typography.lineHeight}`,
869
+ "--crow-letter-spacing": `${styles2.typography.letterSpacing}px`,
842
870
  // Animations
843
871
  "--crow-animation-duration": `${styles2.animations.duration}s`,
844
872
  "--crow-animation-easing": styles2.animations.easing
@@ -1040,7 +1068,7 @@ function ChatBubble({ isExpanded, onClick }) {
1040
1068
  "button",
1041
1069
  {
1042
1070
  onClick,
1043
- className: "fixed z-[999999] rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-all duration-500 border border-gray-200/30 backdrop-blur-md",
1071
+ className: "crow-fixed crow-z-[999999] crow-rounded-full crow-flex crow-items-center crow-justify-center crow-shadow-2xl hover:crow-scale-110 crow-transition-all crow-duration-500 crow-border crow-backdrop-blur-md",
1044
1072
  style: {
1045
1073
  width: styles2.bubble.size,
1046
1074
  height: styles2.bubble.size,
@@ -1063,9 +1091,10 @@ var GlassCard = forwardRef(
1063
1091
  {
1064
1092
  ref,
1065
1093
  className: cn(
1066
- "bg-white/30 border border-gray-200/30 flex flex-col gap-6 rounded-2xl py-6 backdrop-blur-md",
1094
+ "crow-border crow-flex crow-flex-col crow-gap-6 crow-rounded-2xl crow-py-6 crow-backdrop-blur-md",
1067
1095
  className
1068
1096
  ),
1097
+ style: { background: "rgba(255, 255, 255, 0.3)", borderColor: "rgba(229, 231, 235, 0.3)", ...props.style },
1069
1098
  ...props,
1070
1099
  children
1071
1100
  }
@@ -1073,9 +1102,27 @@ var GlassCard = forwardRef(
1073
1102
  }
1074
1103
  );
1075
1104
  GlassCard.displayName = "GlassCard";
1105
+ var GOOGLE_FONTS_MAP = {
1106
+ '"Inter", sans-serif': "Inter:wght@300;400;500;600;700",
1107
+ '"Roboto", sans-serif': "Roboto:wght@300;400;500;700",
1108
+ '"Open Sans", sans-serif': "Open+Sans:wght@300;400;500;600;700",
1109
+ '"Poppins", sans-serif': "Poppins:wght@300;400;500;600;700",
1110
+ '"Montserrat", sans-serif': "Montserrat:wght@300;400;500;600;700"
1111
+ };
1076
1112
  var WidgetShell = forwardRef(
1077
1113
  ({ children, className }, ref) => {
1078
1114
  const { styles: styles2, variant } = useWidgetStyleContext();
1115
+ useEffect(() => {
1116
+ const fontParam = GOOGLE_FONTS_MAP[styles2.typography.fontFamily];
1117
+ if (!fontParam) return;
1118
+ const linkId = `crow-google-font-${fontParam.split(":")[0]}`;
1119
+ if (document.getElementById(linkId)) return;
1120
+ const link = document.createElement("link");
1121
+ link.id = linkId;
1122
+ link.rel = "stylesheet";
1123
+ link.href = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
1124
+ document.head.appendChild(link);
1125
+ }, [styles2.typography.fontFamily]);
1079
1126
  const baseStyle = {
1080
1127
  borderRadius: styles2.dimensions.borderRadius,
1081
1128
  padding: styles2.dimensions.padding,
@@ -1084,18 +1131,21 @@ var WidgetShell = forwardRef(
1084
1131
  color: styles2.colors.text,
1085
1132
  boxShadow: styles2.shadows.widget,
1086
1133
  fontFamily: styles2.typography.fontFamily,
1087
- fontSize: styles2.typography.fontSize
1134
+ fontSize: styles2.typography.fontSize,
1135
+ fontWeight: styles2.typography.fontWeight,
1136
+ lineHeight: styles2.typography.lineHeight,
1137
+ letterSpacing: styles2.typography.letterSpacing
1088
1138
  };
1089
1139
  if (variant === "embedded") {
1090
1140
  return /* @__PURE__ */ jsx(
1091
1141
  GlassCard,
1092
1142
  {
1093
1143
  ref,
1094
- className: `flex flex-col shadow-2xl gap-3 w-full h-full ${className ?? ""}`,
1144
+ className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 ${className ?? ""}`,
1095
1145
  style: {
1096
1146
  ...baseStyle,
1097
- maxWidth: styles2.dimensions.width,
1098
- maxHeight: styles2.dimensions.previewHeight
1147
+ width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
1148
+ height: `min(${styles2.dimensions.maxHeight}px, calc(100vh - 120px))`
1099
1149
  },
1100
1150
  children
1101
1151
  }
@@ -1105,7 +1155,7 @@ var WidgetShell = forwardRef(
1105
1155
  GlassCard,
1106
1156
  {
1107
1157
  ref,
1108
- className: `fixed z-[999999] shadow-2xl gap-3 transition-all duration-500 flex flex-col ${className ?? ""}`,
1158
+ className: `crow-fixed crow-z-[999999] crow-shadow-2xl crow-gap-3 crow-transition-all crow-duration-500 crow-flex crow-flex-col ${className ?? ""}`,
1109
1159
  style: {
1110
1160
  ...baseStyle,
1111
1161
  width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
@@ -1132,13 +1182,13 @@ function WidgetHeader({
1132
1182
  return /* @__PURE__ */ jsxs(
1133
1183
  "div",
1134
1184
  {
1135
- className: "flex items-center justify-between mb-3 pb-2 border-b",
1185
+ className: "crow-flex crow-items-center crow-justify-between crow-mb-3 crow-pb-2 crow-border-b",
1136
1186
  style: { borderColor: styles2.colors.border },
1137
1187
  children: [
1138
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
1188
+ /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-gap-2", children: /* @__PURE__ */ jsx(
1139
1189
  "span",
1140
1190
  {
1141
- className: "text-sm font-semibold",
1191
+ className: "crow-text-sm crow-font-semibold",
1142
1192
  style: {
1143
1193
  color: styles2.colors.text,
1144
1194
  fontSize: styles2.typography.headerFontSize
@@ -1146,34 +1196,34 @@ function WidgetHeader({
1146
1196
  children: agentName
1147
1197
  }
1148
1198
  ) }),
1149
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1199
+ /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1", children: [
1150
1200
  /* @__PURE__ */ jsx(
1151
1201
  "button",
1152
1202
  {
1153
1203
  onClick: onNewChat,
1154
- className: "p-1.5 hover:bg-gray-200 rounded transition-colors",
1204
+ className: "crow-p-1.5 hover:crow-bg-gray-200 crow-rounded crow-transition-colors",
1155
1205
  "aria-label": "New Chat",
1156
1206
  title: "New Chat",
1157
- children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "text-gray-700" })
1207
+ children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "crow-text-gray-700" })
1158
1208
  }
1159
1209
  ),
1160
1210
  isVerifiedUser && /* @__PURE__ */ jsx(
1161
1211
  "button",
1162
1212
  {
1163
1213
  onClick: onToggleHistory,
1164
- className: `p-1.5 hover:bg-gray-200 rounded transition-colors ${showConversationList ? "bg-gray-200" : ""}`,
1214
+ className: `crow-p-1.5 hover:crow-bg-gray-200 crow-rounded crow-transition-colors ${showConversationList ? "crow-bg-gray-200" : ""}`,
1165
1215
  "aria-label": "Conversation History",
1166
1216
  title: "Conversation History",
1167
- children: /* @__PURE__ */ jsx(History, { size: 18, className: "text-gray-700" })
1217
+ children: /* @__PURE__ */ jsx(History, { size: 18, className: "crow-text-gray-700" })
1168
1218
  }
1169
1219
  ),
1170
1220
  showMinimize && onToggleMinimize && /* @__PURE__ */ jsx(
1171
1221
  "button",
1172
1222
  {
1173
1223
  onClick: onToggleMinimize,
1174
- className: "p-1 hover:bg-gray-200 rounded transition-colors",
1224
+ className: "crow-p-1 hover:crow-bg-gray-200 crow-rounded crow-transition-colors",
1175
1225
  "aria-label": isMinimized ? "Expand" : "Minimize",
1176
- children: isMinimized ? /* @__PURE__ */ jsx(ChevronUp, { size: 18, className: "text-gray-900" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 18, className: "text-gray-900" })
1226
+ children: isMinimized ? /* @__PURE__ */ jsx(ChevronUp, { size: 18, className: "crow-text-gray-900" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 18, className: "crow-text-gray-900" })
1177
1227
  }
1178
1228
  )
1179
1229
  ] })
@@ -1190,16 +1240,16 @@ function StreamingText({
1190
1240
  ReactMarkdown,
1191
1241
  {
1192
1242
  components: {
1193
- strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-bold", children }),
1194
- ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 my-1", children }),
1195
- ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-5 my-1", children }),
1196
- li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "[&>p]:inline [&>p]:m-0", children }),
1197
- p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-1 last:mb-0", children }),
1243
+ strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "crow-font-bold", children }),
1244
+ ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "crow-list-disc crow-pl-5 crow-my-1", children }),
1245
+ ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1", children }),
1246
+ li: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
1247
+ p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "crow-mb-1 last:crow-mb-0", children }),
1198
1248
  a: ({ href, children }) => /* @__PURE__ */ jsx(
1199
1249
  "a",
1200
1250
  {
1201
1251
  href,
1202
- className: "underline hover:text-blue-300",
1252
+ className: "crow-underline hover:crow-text-blue-300",
1203
1253
  target: "_blank",
1204
1254
  rel: "noopener noreferrer",
1205
1255
  children
@@ -1210,13 +1260,13 @@ function StreamingText({
1210
1260
  return isInline ? /* @__PURE__ */ jsx(
1211
1261
  "code",
1212
1262
  {
1213
- className: "bg-gray-100 px-1 py-0.5 rounded text-sm",
1263
+ className: "crow-bg-gray-100 crow-px-1 crow-py-0.5 crow-rounded crow-text-sm",
1214
1264
  ...props,
1215
1265
  children
1216
1266
  }
1217
1267
  ) : /* @__PURE__ */ jsx("code", { className, ...props, children });
1218
1268
  },
1219
- pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 p-2 rounded my-1 overflow-x-auto text-sm", children })
1269
+ pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "crow-bg-gray-100 crow-p-2 crow-rounded crow-my-1 crow-overflow-x-auto crow-text-sm", children })
1220
1270
  },
1221
1271
  children: content
1222
1272
  }
@@ -1224,7 +1274,7 @@ function StreamingText({
1224
1274
  isStreaming && /* @__PURE__ */ jsx(
1225
1275
  "span",
1226
1276
  {
1227
- className: "inline-block w-0.5 h-4 ml-0.5 align-text-bottom",
1277
+ className: "crow-inline-block crow-w-0.5 crow-h-4 crow-ml-0.5 crow-align-text-bottom",
1228
1278
  style: {
1229
1279
  backgroundColor: "currentColor",
1230
1280
  animation: "cursor-blink 1s ease-in-out infinite"
@@ -1245,7 +1295,7 @@ function ThinkingIndicator() {
1245
1295
  /* @__PURE__ */ jsx(
1246
1296
  "span",
1247
1297
  {
1248
- className: "inline-block font-medium",
1298
+ className: "crow-inline-block crow-font-medium",
1249
1299
  style: {
1250
1300
  background: "linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.4) 100%)",
1251
1301
  backgroundSize: "200% 100%",
@@ -1271,18 +1321,18 @@ function LoadingHistory() {
1271
1321
  {
1272
1322
  initial: { opacity: 0, y: 10 },
1273
1323
  animate: { opacity: 1, y: 0 },
1274
- className: "flex justify-center items-center py-8",
1275
- children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
1276
- /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [0, 0.15, 0.3].map((delay, i) => /* @__PURE__ */ jsx(
1324
+ className: "crow-flex crow-justify-center crow-items-center crow-py-8",
1325
+ children: /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-items-center crow-gap-3", children: [
1326
+ /* @__PURE__ */ jsx("div", { className: "crow-flex crow-gap-1", children: [0, 0.15, 0.3].map((delay, i) => /* @__PURE__ */ jsx(
1277
1327
  motion.div,
1278
1328
  {
1279
- className: "w-2 h-2 bg-gray-400 rounded-full",
1329
+ className: "crow-w-2 crow-h-2 crow-bg-gray-400 crow-rounded-full",
1280
1330
  animate: { y: [0, -8, 0] },
1281
1331
  transition: { duration: 0.6, repeat: Infinity, delay }
1282
1332
  },
1283
1333
  i
1284
1334
  )) }),
1285
- /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading conversation..." })
1335
+ /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-text-gray-500", children: "Loading conversation..." })
1286
1336
  ] })
1287
1337
  }
1288
1338
  );
@@ -1307,7 +1357,7 @@ function ShimmeringContent({ children }) {
1307
1357
  return /* @__PURE__ */ jsxs(
1308
1358
  "span",
1309
1359
  {
1310
- className: "inline-block",
1360
+ className: "crow-inline-block",
1311
1361
  style: {
1312
1362
  background: "linear-gradient(90deg, rgba(100,100,100,0.6) 0%, rgba(100,100,100,1) 50%, rgba(100,100,100,0.6) 100%)",
1313
1363
  backgroundSize: "200% 100%",
@@ -1332,16 +1382,16 @@ function ReasoningTrace({ thinking, isComplete, toolCalls = [], isWaiting = fals
1332
1382
  const hasThinking = !!thinking && thinking.trim().length > 0;
1333
1383
  const hasToolCalls = toolCalls.length > 0;
1334
1384
  if (!isWaiting && !hasThinking && !hasToolCalls) return null;
1335
- return /* @__PURE__ */ jsx("div", { className: "flex justify-start mb-2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] space-y-1.5", children: [
1385
+ return /* @__PURE__ */ jsx("div", { className: "crow-flex crow-justify-start crow-mb-2", children: /* @__PURE__ */ jsxs("div", { className: "crow-max-w-[90%] crow-space-y-1.5", children: [
1336
1386
  isWaiting && !hasThinking && /* @__PURE__ */ jsx(WaitingIndicator, {}),
1337
1387
  hasThinking && /* @__PURE__ */ jsx(ThinkingBlock, { thinking, isComplete }),
1338
1388
  toolCalls.map((tool) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tool }, tool.id))
1339
1389
  ] }) });
1340
1390
  }
1341
1391
  function WaitingIndicator() {
1342
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-gray-500", children: [
1343
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }) }),
1344
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
1392
+ return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1.5 crow-text-xs crow-text-gray-500", children: [
1393
+ /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) }),
1394
+ /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
1345
1395
  ] });
1346
1396
  }
1347
1397
  function ThinkingBlock({ thinking, isComplete }) {
@@ -1350,25 +1400,25 @@ function ThinkingBlock({ thinking, isComplete }) {
1350
1400
  setIsExpanded(!isComplete);
1351
1401
  }, [isComplete]);
1352
1402
  const isInProgress = !isComplete;
1353
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
1403
+ return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
1354
1404
  /* @__PURE__ */ jsxs(
1355
1405
  "button",
1356
1406
  {
1357
1407
  onClick: () => setIsExpanded(!isExpanded),
1358
- className: `flex items-center gap-1.5 select-none transition-colors ${isInProgress ? "text-gray-500" : "text-gray-600 hover:text-gray-800"} cursor-pointer`,
1408
+ className: `crow-flex crow-items-center crow-gap-1.5 crow-select-none crow-transition-colors ${isInProgress ? "crow-text-gray-500" : "crow-text-gray-600 hover:crow-text-gray-800"} crow-cursor-pointer`,
1359
1409
  children: [
1360
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-4 h-4", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }) : /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }),
1361
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
1410
+ /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center crow-justify-center crow-w-4 crow-h-4", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }) : /* @__PURE__ */ jsx(Brain, { className: "crow-w-3.5 crow-h-3.5" }) }),
1411
+ /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
1362
1412
  /* @__PURE__ */ jsx(
1363
1413
  motion.div,
1364
1414
  {
1365
1415
  animate: { rotate: isExpanded ? 90 : 0 },
1366
1416
  transition: { duration: 0.15 },
1367
- className: "flex-shrink-0",
1368
- children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
1417
+ className: "crow-flex-shrink-0",
1418
+ children: /* @__PURE__ */ jsx(ChevronRight, { className: "crow-w-3 crow-h-3" })
1369
1419
  }
1370
1420
  ),
1371
- isComplete && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-green-500" })
1421
+ isComplete && /* @__PURE__ */ jsx(Check, { className: "crow-w-3 crow-h-3 crow-text-green-500" })
1372
1422
  ]
1373
1423
  }
1374
1424
  ),
@@ -1379,11 +1429,11 @@ function ThinkingBlock({ thinking, isComplete }) {
1379
1429
  animate: { height: "auto", opacity: 1 },
1380
1430
  exit: { height: 0, opacity: 0 },
1381
1431
  transition: { duration: 0.15 },
1382
- className: "overflow-hidden",
1383
- children: /* @__PURE__ */ jsx("div", { className: "border-l-2 border-gray-200 pl-3 ml-2", children: /* @__PURE__ */ jsx(
1432
+ className: "crow-overflow-hidden",
1433
+ children: /* @__PURE__ */ jsx("div", { className: "crow-border-l-2 crow-border-gray-200 crow-pl-3 crow-ml-2", children: /* @__PURE__ */ jsx(
1384
1434
  "div",
1385
1435
  {
1386
- className: `text-xs leading-relaxed whitespace-pre-wrap ${isComplete ? "text-gray-500" : "text-gray-600"}`,
1436
+ className: `crow-text-xs crow-leading-relaxed crow-whitespace-pre-wrap ${isComplete ? "crow-text-gray-500" : "crow-text-gray-600"}`,
1387
1437
  children: thinking
1388
1438
  }
1389
1439
  ) })
@@ -1397,12 +1447,12 @@ function ToolCallBlock({ toolCall }) {
1397
1447
  const isExecuting = toolCall.status === "executing";
1398
1448
  const isComplete = toolCall.status === "complete";
1399
1449
  const isError = toolCall.status === "error";
1400
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
1450
+ return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-flex-col crow-gap-1 crow-text-xs", children: [
1401
1451
  /* @__PURE__ */ jsxs(
1402
1452
  "button",
1403
1453
  {
1404
1454
  onClick: () => hasArgs && setExpanded(!expanded),
1405
- className: `flex items-center gap-1.5 select-none transition-colors ${hasArgs ? "cursor-pointer hover:text-gray-800" : "cursor-default"} ${isExecuting ? "text-gray-500" : "text-gray-600"}`,
1455
+ className: `crow-flex crow-items-center crow-gap-1.5 crow-select-none crow-transition-colors ${hasArgs ? "crow-cursor-pointer hover:crow-text-gray-800" : "crow-cursor-default"} ${isExecuting ? "crow-text-gray-500" : "crow-text-gray-600"}`,
1406
1456
  disabled: !hasArgs,
1407
1457
  children: [
1408
1458
  hasArgs && /* @__PURE__ */ jsx(
@@ -1410,14 +1460,14 @@ function ToolCallBlock({ toolCall }) {
1410
1460
  {
1411
1461
  animate: { rotate: expanded ? 90 : 0 },
1412
1462
  transition: { duration: 0.15 },
1413
- children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
1463
+ children: /* @__PURE__ */ jsx(ChevronRight, { className: "crow-w-3 crow-h-3" })
1414
1464
  }
1415
1465
  ),
1416
- isExecuting && /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-blue-500" }),
1417
- isComplete && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-green-500" }),
1418
- isError && /* @__PURE__ */ jsx("span", { className: "w-3 h-3 text-red-500", children: "\u2715" }),
1419
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: toolCall.name }),
1420
- /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
1466
+ isExecuting && /* @__PURE__ */ jsx(Loader2, { className: "crow-w-3 crow-h-3 crow-animate-spin crow-text-blue-500" }),
1467
+ isComplete && /* @__PURE__ */ jsx(Check, { className: "crow-w-3 crow-h-3 crow-text-green-500" }),
1468
+ isError && /* @__PURE__ */ jsx("span", { className: "crow-w-3 crow-h-3 crow-text-red-500", children: "\u2715" }),
1469
+ /* @__PURE__ */ jsx("span", { className: "crow-font-medium", children: toolCall.name }),
1470
+ /* @__PURE__ */ jsxs("span", { className: "crow-text-gray-400", children: [
1421
1471
  isExecuting && "running...",
1422
1472
  isComplete && "done",
1423
1473
  isError && "failed"
@@ -1432,8 +1482,8 @@ function ToolCallBlock({ toolCall }) {
1432
1482
  animate: { height: "auto", opacity: 1 },
1433
1483
  exit: { height: 0, opacity: 0 },
1434
1484
  transition: { duration: 0.15 },
1435
- className: "overflow-hidden",
1436
- children: /* @__PURE__ */ jsx("pre", { className: "mt-1 p-2 bg-gray-100 rounded text-[10px] font-mono text-gray-700 overflow-x-auto max-h-32 overflow-y-auto ml-4", children: JSON.stringify(toolCall.arguments, null, 2) })
1485
+ className: "crow-overflow-hidden",
1486
+ children: /* @__PURE__ */ jsx("pre", { className: "crow-mt-1 crow-p-2 crow-bg-gray-100 crow-rounded crow-text-xs crow-font-mono crow-text-gray-700 crow-overflow-x-auto crow-max-h-32 crow-overflow-y-auto crow-ml-4", children: JSON.stringify(toolCall.arguments, null, 2) })
1437
1487
  }
1438
1488
  ) })
1439
1489
  ] });
@@ -1454,7 +1504,7 @@ function MessageBubble({
1454
1504
  "div",
1455
1505
  {
1456
1506
  id: message.id,
1457
- className: `flex flex-col ${message.isBot ? "items-start" : "items-end"}`,
1507
+ className: `crow-flex crow-flex-col ${message.isBot ? "crow-items-start" : "crow-items-end"}`,
1458
1508
  children: [
1459
1509
  showReasoningTrace && /* @__PURE__ */ jsx(
1460
1510
  ReasoningTrace,
@@ -1468,7 +1518,7 @@ function MessageBubble({
1468
1518
  hasContent && /* @__PURE__ */ jsxs(
1469
1519
  "div",
1470
1520
  {
1471
- className: "max-w-[80%] rounded-2xl px-4 py-2 transition-all duration-150",
1521
+ className: "crow-max-w-[80%] crow-rounded-2xl crow-px-4 crow-py-2 crow-transition-all crow-duration-150",
1472
1522
  style: message.isBot ? {
1473
1523
  background: styles2.colors.botBubble,
1474
1524
  color: styles2.colors.botText
@@ -1478,7 +1528,7 @@ function MessageBubble({
1478
1528
  border: `1px solid ${styles2.colors.userBorder}`
1479
1529
  },
1480
1530
  children: [
1481
- /* @__PURE__ */ jsx("div", { className: "text-sm whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
1531
+ /* @__PURE__ */ jsx("div", { className: "crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
1482
1532
  StreamingText,
1483
1533
  {
1484
1534
  content: message.content,
@@ -1488,16 +1538,16 @@ function MessageBubble({
1488
1538
  ReactMarkdown,
1489
1539
  {
1490
1540
  components: {
1491
- strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-bold", children }),
1492
- ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 my-1", children }),
1493
- ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-5 my-1", children }),
1494
- li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "[&>p]:inline [&>p]:m-0", children }),
1495
- p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-1 last:mb-0", children }),
1541
+ strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "crow-font-bold", children }),
1542
+ ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "crow-list-disc crow-pl-5 crow-my-1", children }),
1543
+ ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1", children }),
1544
+ li: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
1545
+ p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "crow-mb-1 last:crow-mb-0", children }),
1496
1546
  a: ({ href, children }) => /* @__PURE__ */ jsx(
1497
1547
  "a",
1498
1548
  {
1499
1549
  href,
1500
- className: "underline hover:text-blue-300",
1550
+ className: "crow-underline hover:crow-text-blue-300",
1501
1551
  target: "_blank",
1502
1552
  rel: "noopener noreferrer",
1503
1553
  children
@@ -1507,7 +1557,7 @@ function MessageBubble({
1507
1557
  children: message.content
1508
1558
  }
1509
1559
  ) }),
1510
- /* @__PURE__ */ jsx("div", { className: "text-xs opacity-60 mt-1", children: formatTime(message.timestamp) })
1560
+ /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-opacity-60 crow-mt-1", children: formatTime(message.timestamp) })
1511
1561
  ]
1512
1562
  }
1513
1563
  )
@@ -1589,7 +1639,7 @@ var MessagesContainer = forwardRef(
1589
1639
  animate: { opacity: 1 },
1590
1640
  exit: { opacity: 0 },
1591
1641
  transition: { duration: styles2.animations.duration },
1592
- className: "relative flex-1 min-h-0 rounded-2xl mb-3 overflow-y-auto p-4 space-y-3 pointer-events-auto",
1642
+ className: "crow-relative crow-flex-1 crow-min-h-0 crow-rounded-2xl crow-mb-3 crow-overflow-y-auto crow-p-4 crow-space-y-3 crow-pointer-events-auto",
1593
1643
  style: {
1594
1644
  background: styles2.colors.messagesBackground,
1595
1645
  ...maxHeight && { maxHeight }
@@ -1612,20 +1662,20 @@ function ConversationList({
1612
1662
  initial: { opacity: 0, height: 0 },
1613
1663
  animate: { opacity: 1, height: "auto" },
1614
1664
  exit: { opacity: 0, height: 0 },
1615
- className: "mb-3 rounded-xl bg-gray-50 border border-gray-200",
1665
+ className: "crow-mb-3 crow-rounded-xl crow-bg-gray-50 crow-border crow-border-gray-200",
1616
1666
  children: [
1617
- /* @__PURE__ */ jsxs("div", { className: "p-2 border-b border-gray-200 flex justify-between items-center", children: [
1618
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Recent Conversations" }),
1619
- /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-1 hover:bg-gray-200 rounded", children: /* @__PURE__ */ jsx(X, { size: 14, className: "text-gray-500" }) })
1667
+ /* @__PURE__ */ jsxs("div", { className: "crow-p-2 crow-border-b crow-border-gray-200 crow-flex crow-justify-between crow-items-center", children: [
1668
+ /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-font-medium crow-text-gray-700", children: "Recent Conversations" }),
1669
+ /* @__PURE__ */ jsx("button", { onClick: onClose, className: "crow-p-1 hover:crow-bg-gray-200 crow-rounded", children: /* @__PURE__ */ jsx(X, { size: 14, className: "crow-text-gray-500" }) })
1620
1670
  ] }),
1621
- /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500", children: "No conversations yet" }) : conversations.map((conv) => /* @__PURE__ */ jsxs(
1671
+ /* @__PURE__ */ jsx("div", { className: "crow-max-h-[200px] crow-overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "crow-p-4 crow-text-center crow-text-sm crow-text-gray-500", children: "No conversations yet" }) : conversations.map((conv) => /* @__PURE__ */ jsxs(
1622
1672
  "button",
1623
1673
  {
1624
1674
  onClick: () => onSelect(conv.id),
1625
- className: `w-full p-3 text-left hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0 ${currentConversationId === conv.id ? "bg-blue-50" : ""}`,
1675
+ className: `crow-w-full crow-p-3 crow-text-left hover:crow-bg-gray-100 crow-transition-colors crow-border-b crow-border-gray-100 last:crow-border-0 ${currentConversationId === conv.id ? "crow-bg-blue-50" : ""}`,
1626
1676
  children: [
1627
- /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-800 truncate", children: conv.name || "Untitled conversation" }),
1628
- /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: formatConversationDate(conv.updated_at) })
1677
+ /* @__PURE__ */ jsx("div", { className: "crow-text-sm crow-font-medium crow-text-gray-800 crow-truncate", children: conv.name || "Untitled conversation" }),
1678
+ /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-text-gray-500 crow-mt-0.5", children: formatConversationDate(conv.updated_at) })
1629
1679
  ]
1630
1680
  },
1631
1681
  conv.id
@@ -1642,14 +1692,14 @@ function WorkflowPanel({ workflow, onExit }) {
1642
1692
  animate: { opacity: 1, y: 0 },
1643
1693
  exit: { opacity: 0, y: -10 },
1644
1694
  transition: { duration: 0.3 },
1645
- className: "mb-3 p-3 rounded-xl bg-gray-50 border border-gray-200",
1646
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1647
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900 flex items-center gap-1", children: workflow.name }),
1695
+ className: "crow-mb-3 crow-p-3 crow-rounded-xl crow-bg-gray-50 crow-border crow-border-gray-200",
1696
+ children: /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-justify-between", children: [
1697
+ /* @__PURE__ */ jsx("span", { className: "crow-text-sm crow-font-medium crow-text-gray-900 crow-flex crow-items-center crow-gap-1", children: workflow.name }),
1648
1698
  /* @__PURE__ */ jsx(
1649
1699
  "button",
1650
1700
  {
1651
1701
  onClick: onExit,
1652
- className: "text-xs text-gray-500 hover:text-gray-700 underline",
1702
+ className: "crow-text-xs crow-text-gray-500 hover:crow-text-gray-700 crow-underline",
1653
1703
  children: "Exit"
1654
1704
  }
1655
1705
  )
@@ -1662,7 +1712,7 @@ function PoweredByBadge({ apiUrl = "" }) {
1662
1712
  const branding = styles2.branding;
1663
1713
  if (!branding.showPoweredBy) return null;
1664
1714
  const logoUrl = branding.logoUrl?.startsWith("http") ? branding.logoUrl : `${apiUrl}${branding.logoUrl}`;
1665
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 mb-3 text-[11px] text-gray-400", children: [
1715
+ return /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-justify-center crow-gap-1.5 crow-mb-3 crow-text-xs crow-text-gray-400", children: [
1666
1716
  branding.showLogo && logoUrl && /* @__PURE__ */ jsx(
1667
1717
  "img",
1668
1718
  {
@@ -1670,7 +1720,7 @@ function PoweredByBadge({ apiUrl = "" }) {
1670
1720
  alt: "Crow",
1671
1721
  width: 14,
1672
1722
  height: 14,
1673
- className: "opacity-50"
1723
+ className: "crow-opacity-50"
1674
1724
  }
1675
1725
  ),
1676
1726
  /* @__PURE__ */ jsx("span", { children: branding.poweredByText })
@@ -1699,7 +1749,7 @@ var ModelSelector = ({
1699
1749
  acc[model.provider].push(model);
1700
1750
  return acc;
1701
1751
  }, {});
1702
- return /* @__PURE__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
1752
+ return /* @__PURE__ */ jsxs("div", { className: "crow-relative", ref: dropdownRef, children: [
1703
1753
  /* @__PURE__ */ jsxs(
1704
1754
  "button",
1705
1755
  {
@@ -1707,10 +1757,10 @@ var ModelSelector = ({
1707
1757
  onClick: () => !disabled && setIsOpen(!isOpen),
1708
1758
  disabled,
1709
1759
  className: cn(
1710
- "flex items-center gap-1 px-2 py-1 rounded-md text-xs",
1711
- "bg-transparent text-[#9CA3AF]",
1712
- "hover:text-gray-700 transition-colors",
1713
- disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
1760
+ "crow-flex crow-items-center crow-gap-1 crow-px-2 crow-py-1 crow-rounded-md crow-text-xs",
1761
+ "crow-bg-transparent crow-text-gray-400",
1762
+ "hover:crow-text-gray-700 crow-transition-colors",
1763
+ disabled ? "crow-opacity-50 crow-cursor-not-allowed" : "crow-cursor-pointer"
1714
1764
  ),
1715
1765
  children: [
1716
1766
  /* @__PURE__ */ jsx("span", { children: selectedModelData?.name || "Select Model" }),
@@ -1718,16 +1768,16 @@ var ModelSelector = ({
1718
1768
  ChevronDown,
1719
1769
  {
1720
1770
  className: cn(
1721
- "w-3 h-3 transition-transform",
1722
- isOpen ? "rotate-180" : ""
1771
+ "crow-w-3 crow-h-3 crow-transition-transform",
1772
+ isOpen ? "crow-rotate-180" : ""
1723
1773
  )
1724
1774
  }
1725
1775
  )
1726
1776
  ]
1727
1777
  }
1728
1778
  ),
1729
- isOpen && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full mb-2 left-0 min-w-[180px] bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden", children: Object.entries(groupedModels).map(([provider, providerModels]) => /* @__PURE__ */ jsxs("div", { children: [
1730
- /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs font-medium text-gray-400 uppercase tracking-wide bg-gray-50", children: provider }),
1779
+ isOpen && /* @__PURE__ */ jsx("div", { className: "crow-absolute crow-bottom-full crow-mb-2 crow-left-0 crow-min-w-[180px] crow-bg-white crow-border crow-border-gray-200 crow-rounded-xl crow-shadow-lg crow-z-50 crow-overflow-hidden", children: Object.entries(groupedModels).map(([provider, providerModels]) => /* @__PURE__ */ jsxs("div", { children: [
1780
+ /* @__PURE__ */ jsx("div", { className: "crow-px-3 crow-py-1.5 crow-text-xs crow-font-medium crow-text-gray-400 crow-uppercase crow-tracking-wide crow-bg-gray-50", children: provider }),
1731
1781
  providerModels.map((model) => /* @__PURE__ */ jsxs(
1732
1782
  "button",
1733
1783
  {
@@ -1736,13 +1786,13 @@ var ModelSelector = ({
1736
1786
  setIsOpen(false);
1737
1787
  },
1738
1788
  className: cn(
1739
- "w-full flex items-center justify-between px-3 py-1.5 text-sm",
1740
- "hover:bg-gray-100 transition-colors",
1741
- model.id === selectedModel ? "text-gray-900" : "text-gray-600"
1789
+ "crow-w-full crow-flex crow-items-center crow-justify-between crow-px-3 crow-py-1.5 crow-text-sm",
1790
+ "hover:crow-bg-gray-100 crow-transition-colors",
1791
+ model.id === selectedModel ? "crow-text-gray-900" : "crow-text-gray-600"
1742
1792
  ),
1743
1793
  children: [
1744
1794
  /* @__PURE__ */ jsx("span", { children: model.name }),
1745
- model.id === selectedModel && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" })
1795
+ model.id === selectedModel && /* @__PURE__ */ jsx(Check, { className: "crow-w-4 crow-h-4 crow-text-green-500" })
1746
1796
  ]
1747
1797
  },
1748
1798
  model.id
@@ -1779,7 +1829,7 @@ var Textarea = React3.forwardRef(
1779
1829
  "textarea",
1780
1830
  {
1781
1831
  className: cn(
1782
- "flex w-full rounded-md border-none bg-transparent px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 min-h-[32px] resize-none",
1832
+ "crow-flex crow-w-full crow-rounded-md crow-border-none crow-bg-transparent crow-px-3 crow-py-1.5 crow-text-base crow-text-gray-900 placeholder:crow-text-gray-500 focus-visible:crow-outline-none focus-visible:crow-ring-0 disabled:crow-cursor-not-allowed disabled:crow-opacity-50 crow-min-h-[32px] crow-resize-none",
1783
1833
  className
1784
1834
  ),
1785
1835
  ref,
@@ -1798,9 +1848,10 @@ var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props },
1798
1848
  ref,
1799
1849
  sideOffset,
1800
1850
  className: cn(
1801
- "z-50 overflow-hidden rounded-md border border-[#333333] bg-[#1F2023] px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95",
1851
+ "crow-z-50 crow-overflow-hidden crow-rounded-md crow-border crow-px-3 crow-py-1.5 crow-text-sm crow-text-white crow-shadow-md",
1802
1852
  className
1803
1853
  ),
1854
+ style: { borderColor: "#333333", background: "#1F2023" },
1804
1855
  ...props
1805
1856
  }
1806
1857
  ));
@@ -1808,21 +1859,21 @@ TooltipContent.displayName = "TooltipContent";
1808
1859
  var Button = React3.forwardRef(
1809
1860
  ({ className, variant = "default", size = "default", ...props }, ref) => {
1810
1861
  const variantClasses = {
1811
- default: "bg-white hover:bg-white/80 text-black",
1812
- outline: "border border-[#444444] bg-transparent hover:bg-[#3A3A40]",
1813
- ghost: "bg-transparent hover:bg-[#3A3A40]"
1862
+ default: "crow-bg-white hover:crow-bg-white/80 crow-text-black",
1863
+ outline: "crow-border crow-bg-transparent hover:crow-bg-gray-700",
1864
+ ghost: "crow-bg-transparent hover:crow-bg-gray-700"
1814
1865
  };
1815
1866
  const sizeClasses = {
1816
- default: "h-10 px-4 py-2",
1817
- sm: "h-8 px-3 text-sm",
1818
- lg: "h-12 px-6",
1819
- icon: "h-8 w-8 rounded-full aspect-[1/1]"
1867
+ default: "crow-h-10 crow-px-4 crow-py-2",
1868
+ sm: "crow-h-8 crow-px-3 crow-text-sm",
1869
+ lg: "crow-h-12 crow-px-6",
1870
+ icon: "crow-h-8 crow-w-8 crow-rounded-full"
1820
1871
  };
1821
1872
  return /* @__PURE__ */ jsx(
1822
1873
  "button",
1823
1874
  {
1824
1875
  className: cn(
1825
- "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
1876
+ "crow-inline-flex crow-items-center crow-justify-center crow-font-medium crow-transition-colors focus-visible:crow-outline-none disabled:crow-pointer-events-none disabled:crow-opacity-50",
1826
1877
  variantClasses[variant],
1827
1878
  sizeClasses[size],
1828
1879
  className
@@ -1882,10 +1933,11 @@ var PromptInput = React3.forwardRef(
1882
1933
  {
1883
1934
  ref,
1884
1935
  className: cn(
1885
- "rounded-3xl border border-[#444444] bg-[#1F2023] p-1.5 shadow-[0_8px_30px_rgba(0,0,0,0.24)] transition-all duration-300",
1886
- isLoading && "border-red-500/70",
1936
+ "crow-rounded-3xl crow-border crow-p-1.5 crow-shadow-lg crow-transition-all crow-duration-300",
1937
+ isLoading && "crow-border-red-500",
1887
1938
  className
1888
1939
  ),
1940
+ style: { borderColor: isLoading ? void 0 : "#444444", background: "#1F2023" },
1889
1941
  children
1890
1942
  }
1891
1943
  )
@@ -1927,7 +1979,7 @@ var PromptInputActions = ({
1927
1979
  children,
1928
1980
  className,
1929
1981
  ...props
1930
- }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
1982
+ }) => /* @__PURE__ */ jsx("div", { className: cn("crow-flex crow-items-center crow-gap-2", className), ...props, children });
1931
1983
  var PromptInputAction = ({
1932
1984
  tooltip,
1933
1985
  children,
@@ -1968,15 +2020,15 @@ var PromptInputBox = React3.forwardRef(
1968
2020
  isLoading,
1969
2021
  onSubmit: handleSubmit,
1970
2022
  className: cn(
1971
- "w-full bg-[#1F2023] border-[#444444] shadow-[0_8px_30px_rgba(0,0,0,0.24)] transition-all duration-300 ease-in-out",
2023
+ "crow-w-full crow-shadow-lg crow-transition-all crow-duration-300 crow-ease-in-out",
1972
2024
  className
1973
2025
  ),
1974
2026
  disabled: isLoading,
1975
2027
  ref: ref || promptBoxRef,
1976
2028
  children: [
1977
- /* @__PURE__ */ jsx("div", { className: "transition-all duration-300 opacity-100", children: /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder, className: "text-base" }) }),
1978
- /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex items-center justify-between gap-2 p-0 pt-1", children: [
1979
- /* @__PURE__ */ jsx("div", { className: "flex items-center", children: availableModels.length > 0 && onModelChange && /* @__PURE__ */ jsx(
2029
+ /* @__PURE__ */ jsx("div", { className: "crow-transition-all crow-duration-300 crow-opacity-100", children: /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder, className: "crow-text-base" }) }),
2030
+ /* @__PURE__ */ jsxs(PromptInputActions, { className: "crow-flex crow-items-center crow-justify-between crow-gap-2 crow-p-0 crow-pt-1", children: [
2031
+ /* @__PURE__ */ jsx("div", { className: "crow-flex crow-items-center", children: availableModels.length > 0 && onModelChange && /* @__PURE__ */ jsx(
1980
2032
  ModelSelector,
1981
2033
  {
1982
2034
  models: availableModels,
@@ -1995,9 +2047,12 @@ var PromptInputBox = React3.forwardRef(
1995
2047
  variant: "default",
1996
2048
  size: "icon",
1997
2049
  className: cn(
1998
- "h-7 w-7 rounded-full transition-all duration-200",
1999
- isLoading ? "!bg-red-500 hover:!bg-red-600 !text-white" : hasContent ? "!bg-white hover:!bg-white/80 !text-[#1F2023]" : "!bg-transparent hover:!bg-gray-600/30 !text-[#1F2023] hover:!text-[#1F2023]"
2050
+ "crow-h-7 crow-w-7 crow-rounded-full crow-transition-all crow-duration-200"
2000
2051
  ),
2052
+ style: {
2053
+ background: isLoading ? "#ef4444" : hasContent ? "#ffffff" : "transparent",
2054
+ color: isLoading ? "#ffffff" : "#1F2023"
2055
+ },
2001
2056
  onClick: () => {
2002
2057
  if (isLoading && onStop) {
2003
2058
  onStop();
@@ -2005,7 +2060,7 @@ var PromptInputBox = React3.forwardRef(
2005
2060
  handleSubmit();
2006
2061
  }
2007
2062
  },
2008
- children: isLoading ? /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5 fill-white text-white" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5 text-[#1F2023]" })
2063
+ children: isLoading ? /* @__PURE__ */ jsx(Square, { className: "crow-h-3.5 crow-w-3.5", style: { fill: "white", color: "white" } }) : /* @__PURE__ */ jsx(ArrowUp, { className: "crow-h-3.5 crow-w-3.5", style: { color: "#1F2023" } })
2009
2064
  }
2010
2065
  )
2011
2066
  }
@@ -2204,7 +2259,7 @@ function CrowWidget({
2204
2259
  onExit: handleExitWorkflow
2205
2260
  }
2206
2261
  ) }),
2207
- /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
2262
+ /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsx(
2208
2263
  MessageList,
2209
2264
  {
2210
2265
  messages: chat.messages,
@@ -2213,7 +2268,7 @@ function CrowWidget({
2213
2268
  isGenerating: chat.isLoading
2214
2269
  }
2215
2270
  ) }) }),
2216
- /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
2271
+ /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto", children: [
2217
2272
  /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
2218
2273
  /* @__PURE__ */ jsx(
2219
2274
  PromptInputBox,
@@ -2222,7 +2277,7 @@ function CrowWidget({
2222
2277
  onStop: chat.stopGeneration,
2223
2278
  placeholder: "Type your message...",
2224
2279
  isLoading: chat.isLoading,
2225
- className: "!bg-white !border-gray-300 backdrop-blur-md"
2280
+ className: "crow-backdrop-blur-md"
2226
2281
  }
2227
2282
  )
2228
2283
  ] })
@@ -2254,7 +2309,7 @@ function CrowWidget({
2254
2309
  onExit: handleExitWorkflow
2255
2310
  }
2256
2311
  ) }),
2257
- /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
2312
+ /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsx(
2258
2313
  MessageList,
2259
2314
  {
2260
2315
  messages: chat.messages,
@@ -2263,7 +2318,7 @@ function CrowWidget({
2263
2318
  isGenerating: chat.isLoading
2264
2319
  }
2265
2320
  ) }) }),
2266
- /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
2321
+ /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto", children: [
2267
2322
  /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
2268
2323
  /* @__PURE__ */ jsx(
2269
2324
  PromptInputBox,
@@ -2272,7 +2327,7 @@ function CrowWidget({
2272
2327
  onStop: chat.stopGeneration,
2273
2328
  placeholder: "Type your message...",
2274
2329
  isLoading: chat.isLoading,
2275
- className: "!bg-white !border-gray-300 backdrop-blur-md"
2330
+ className: "crow-backdrop-blur-md"
2276
2331
  }
2277
2332
  )
2278
2333
  ] })
@@ -2389,11 +2444,14 @@ function CrowCopilot({
2389
2444
  children: /* @__PURE__ */ jsxs(
2390
2445
  "div",
2391
2446
  {
2392
- className: `flex flex-col h-full bg-white ${position === "left" ? "border-r" : "border-l"} border-gray-200 ${className || ""}`,
2447
+ className: `crow-flex crow-flex-col crow-h-full ${position === "left" ? "crow-border-r" : "crow-border-l"} ${className || ""}`,
2393
2448
  style: {
2394
2449
  width: widthStyle,
2395
2450
  fontFamily: styles2.typography.fontFamily,
2396
2451
  fontSize: styles2.typography.fontSize,
2452
+ fontWeight: styles2.typography.fontWeight,
2453
+ lineHeight: styles2.typography.lineHeight,
2454
+ letterSpacing: styles2.typography.letterSpacing,
2397
2455
  background: styles2.colors.background,
2398
2456
  borderColor: styles2.colors.border
2399
2457
  },
@@ -2401,7 +2459,7 @@ function CrowCopilot({
2401
2459
  /* @__PURE__ */ jsxs(
2402
2460
  "div",
2403
2461
  {
2404
- className: "flex items-center justify-between px-4 py-3 border-b",
2462
+ className: "crow-flex crow-items-center crow-justify-between crow-px-4 crow-py-3 crow-border-b",
2405
2463
  style: {
2406
2464
  height: styles2.dimensions.headerHeight,
2407
2465
  borderColor: styles2.colors.border
@@ -2410,7 +2468,7 @@ function CrowCopilot({
2410
2468
  /* @__PURE__ */ jsx(
2411
2469
  "span",
2412
2470
  {
2413
- className: "font-semibold",
2471
+ className: "crow-font-semibold",
2414
2472
  style: {
2415
2473
  color: styles2.colors.text,
2416
2474
  fontSize: styles2.typography.headerFontSize
@@ -2418,34 +2476,34 @@ function CrowCopilot({
2418
2476
  children: agentName || title
2419
2477
  }
2420
2478
  ),
2421
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
2479
+ /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1", children: [
2422
2480
  /* @__PURE__ */ jsx(
2423
2481
  "button",
2424
2482
  {
2425
2483
  onClick: handleNewChat,
2426
- className: "p-1.5 hover:bg-gray-100 rounded transition-colors",
2484
+ className: "crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors",
2427
2485
  "aria-label": "New Chat",
2428
2486
  title: "New Chat",
2429
- children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-4 h-4 text-gray-600" })
2487
+ children: /* @__PURE__ */ jsx(PlusIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
2430
2488
  }
2431
2489
  ),
2432
2490
  isVerifiedUser && /* @__PURE__ */ jsx(
2433
2491
  "button",
2434
2492
  {
2435
2493
  onClick: handleToggleHistory,
2436
- className: `p-1.5 hover:bg-gray-100 rounded transition-colors ${showConversationList ? "bg-gray-100" : ""}`,
2494
+ className: `crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors ${showConversationList ? "crow-bg-gray-100" : ""}`,
2437
2495
  "aria-label": "Conversation History",
2438
2496
  title: "Conversation History",
2439
- children: /* @__PURE__ */ jsx(HistoryIcon, { className: "w-4 h-4 text-gray-600" })
2497
+ children: /* @__PURE__ */ jsx(HistoryIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
2440
2498
  }
2441
2499
  ),
2442
2500
  showClose && onClose && /* @__PURE__ */ jsx(
2443
2501
  "button",
2444
2502
  {
2445
2503
  onClick: onClose,
2446
- className: "p-1.5 hover:bg-gray-100 rounded transition-colors",
2504
+ className: "crow-p-1.5 hover:crow-bg-gray-100 crow-rounded crow-transition-colors",
2447
2505
  "aria-label": "Close",
2448
- children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-4 h-4 text-gray-600" })
2506
+ children: /* @__PURE__ */ jsx(CloseIcon, { className: "crow-w-4 crow-h-4 crow-text-gray-600" })
2449
2507
  }
2450
2508
  )
2451
2509
  ] })
@@ -2470,7 +2528,7 @@ function CrowCopilot({
2470
2528
  isGenerating: chat.isLoading
2471
2529
  }
2472
2530
  ) }),
2473
- /* @__PURE__ */ jsxs("div", { className: "p-3 border-t", style: { borderColor: styles2.colors.border }, children: [
2531
+ /* @__PURE__ */ jsxs("div", { className: "crow-p-3 crow-border-t", style: { borderColor: styles2.colors.border }, children: [
2474
2532
  styles2.branding.showPoweredBy && /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
2475
2533
  /* @__PURE__ */ jsx(
2476
2534
  PromptInputBox,
@@ -2478,8 +2536,7 @@ function CrowCopilot({
2478
2536
  onSend: handleSend,
2479
2537
  onStop: chat.stopGeneration,
2480
2538
  placeholder: "Ask anything...",
2481
- isLoading: chat.isLoading,
2482
- className: "!bg-white !border-gray-300"
2539
+ isLoading: chat.isLoading
2483
2540
  }
2484
2541
  )
2485
2542
  ] })