@usecrow/ui 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -687,7 +687,10 @@ var DEFAULT_WIDGET_STYLES = {
   typography: {
     fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontSize: 14,
-    headerFontSize: 16
+    headerFontSize: 16,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: 0
   },
   // ═══════════════════════════════════════════════════════════
   // ANIMATIONS
@@ -702,7 +705,6 @@ var DEFAULT_WIDGET_STYLES = {
   dimensions: {
     width: 400,
     maxHeight: 600,
-    previewHeight: 700,
     messagesMaxHeight: 350,
     borderRadius: 24,
     padding: 20
@@ -765,7 +767,10 @@ var DEFAULT_COPILOT_STYLES = {
   typography: {
     fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontSize: 14,
-    headerFontSize: 16
+    headerFontSize: 16,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: 0
   },
   // ═══════════════════════════════════════════════════════════
   // ANIMATIONS
@@ -885,6 +890,9 @@ function stylesToCSSVariables(styles2) {
     "--crow-font-family": styles2.typography.fontFamily,
     "--crow-font-size": `${styles2.typography.fontSize}px`,
     "--crow-header-font-size": `${styles2.typography.headerFontSize}px`,
+    "--crow-font-weight": `${styles2.typography.fontWeight}`,
+    "--crow-line-height": `${styles2.typography.lineHeight}`,
+    "--crow-letter-spacing": `${styles2.typography.letterSpacing}px`,
     // Animations
     "--crow-animation-duration": `${styles2.animations.duration}s`,
     "--crow-animation-easing": styles2.animations.easing
@@ -1120,9 +1128,27 @@ var GlassCard = React3.forwardRef(
   }
 );
 GlassCard.displayName = "GlassCard";
+var GOOGLE_FONTS_MAP = {
+  '"Inter", sans-serif': "Inter:wght@300;400;500;600;700",
+  '"Roboto", sans-serif': "Roboto:wght@300;400;500;700",
+  '"Open Sans", sans-serif': "Open+Sans:wght@300;400;500;600;700",
+  '"Poppins", sans-serif': "Poppins:wght@300;400;500;600;700",
+  '"Montserrat", sans-serif': "Montserrat:wght@300;400;500;600;700"
+};
 var WidgetShell = React3.forwardRef(
   ({ children, className }, ref) => {
     const { styles: styles2, variant } = useWidgetStyleContext();
+    React3.useEffect(() => {
+      const fontParam = GOOGLE_FONTS_MAP[styles2.typography.fontFamily];
+      if (!fontParam) return;
+      const linkId = `crow-google-font-${fontParam.split(":")[0]}`;
+      if (document.getElementById(linkId)) return;
+      const link = document.createElement("link");
+      link.id = linkId;
+      link.rel = "stylesheet";
+      link.href = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+      document.head.appendChild(link);
+    }, [styles2.typography.fontFamily]);
     const baseStyle = {
       borderRadius: styles2.dimensions.borderRadius,
       padding: styles2.dimensions.padding,
@@ -1131,18 +1157,21 @@ var WidgetShell = React3.forwardRef(
       color: styles2.colors.text,
       boxShadow: styles2.shadows.widget,
       fontFamily: styles2.typography.fontFamily,
-      fontSize: styles2.typography.fontSize
+      fontSize: styles2.typography.fontSize,
+      fontWeight: styles2.typography.fontWeight,
+      lineHeight: styles2.typography.lineHeight,
+      letterSpacing: styles2.typography.letterSpacing
     };
     if (variant === "embedded") {
       return /* @__PURE__ */ jsxRuntime.jsx(
         GlassCard,
         {
           ref,
-          className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 crow-w-full crow-h-full ${className ?? ""}`,
+          className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 ${className ?? ""}`,
           style: {
             ...baseStyle,
-            maxWidth: styles2.dimensions.width,
-            maxHeight: styles2.dimensions.previewHeight
+            width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
+            height: `min(${styles2.dimensions.maxHeight}px, calc(100vh - 120px))`
           },
           children
         }
@@ -1525,7 +1554,7 @@ function MessageBubble({
               border: `1px solid ${styles2.colors.userBorder}`
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsxRuntime.jsx(
                 StreamingText,
                 {
                   content: message.content,
@@ -2256,7 +2285,7 @@ function CrowWidget({
                 onExit: handleExitWorkflow
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(
               MessageList,
               {
                 messages: chat.messages,
@@ -2306,7 +2335,7 @@ function CrowWidget({
               onExit: handleExitWorkflow
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(
             MessageList,
             {
               messages: chat.messages,
@@ -2446,6 +2475,9 @@ function CrowCopilot({
             width: widthStyle,
             fontFamily: styles2.typography.fontFamily,
             fontSize: styles2.typography.fontSize,
+            fontWeight: styles2.typography.fontWeight,
+            lineHeight: styles2.typography.lineHeight,
+            letterSpacing: styles2.typography.letterSpacing,
             background: styles2.colors.background,
             borderColor: styles2.colors.border
           },