@yourgpt/copilot-sdk 1.4.33 → 1.4.35

package/README.md

@@ -49,6 +49,8 @@ function App() {
 
 > **Note:** The `@source` path must point to `dist/` (not `src/`) and include all file extensions `{js,ts,jsx,tsx}`.
 
+> **Important:** For Tailwind v4, you also need the `@theme inline` block to map CSS variables like `--background` to Tailwind utilities like `bg-background`. If you have shadcn/ui, this is already configured. Otherwise, see the [Quick Start guide](https://copilot-sdk.yourgpt.ai/docs/quickstart) for complete setup.
+
 ## Theming
 
 Works automatically with existing shadcn/ui setup. For projects without shadcn:

package/dist/styles.css

@@ -1,64 +1,151 @@
 /* YourGPT Copilot SDK - Base Styles */
-/* Default neutral theme */
+/*
+ * IMPORTANT: These are fallback defaults only.
+ * If user has their own shadcn/ui CSS variables defined on :root,
+ * those will be used instead (user styles should be imported AFTER this file
+ * or defined outside @layer to take precedence).
+ *
+ * To ensure your app's variables take precedence:
+ * 1. Import SDK styles first: import "@yourgpt/copilot-sdk/ui/styles.css"
+ * 2. Then import your globals.css with your :root variables
+ */
+
+/* Low-priority layer for SDK defaults - user styles will override */
+@layer csdk-base {
+  :root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(240 10% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --ring: hsl(240 5.9% 10%);
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --ring: hsl(240 4.9% 83.9%);
+  }
+}
 
-:root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
+/* Loader Animations */
+@keyframes csdk-spinner-fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.15; }
+}
 
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(240 10% 3.9%);
+@keyframes csdk-thin-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.85); }
+}
+
+@keyframes csdk-pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.75); }
+}
 
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(240 10% 3.9%);
+@keyframes csdk-bounce-dots {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-6px); }
+}
 
-  --primary: hsl(240 5.9% 10%);
-  --primary-foreground: hsl(0 0% 98%);
+@keyframes csdk-typing {
+  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+  30% { opacity: 1; transform: scale(1); }
+}
 
-  --secondary: hsl(240 4.8% 95.9%);
-  --secondary-foreground: hsl(240 5.9% 10%);
+@keyframes csdk-wave {
+  0%, 100% { transform: scaleY(0.5); }
+  50% { transform: scaleY(1); }
+}
 
-  --muted: hsl(240 4.8% 95.9%);
-  --muted-foreground: hsl(240 3.8% 46.1%);
+@keyframes csdk-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
 
-  --accent: hsl(240 4.8% 95.9%);
-  --accent-foreground: hsl(240 5.9% 10%);
+@keyframes csdk-text-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
 
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
+@keyframes csdk-shimmer {
+  0% { background-position: 100% center; }
+  100% { background-position: -100% center; }
+}
 
-  --border: hsl(240 5.9% 90%);
-  --input: hsl(240 5.9% 90%);
-  --ring: hsl(240 5.9% 10%);
+@keyframes csdk-loading-dots {
+  0%, 20% { opacity: 0; }
+  40%, 100% { opacity: 1; }
+}
 
-  --radius: 0.5rem;
+/* Loader Animation Classes */
+.csdk-loader-spinner-fade {
+  animation: csdk-spinner-fade 1.2s linear infinite;
 }
 
-.dark {
-  --background: hsl(240 10% 3.9%);
-  --foreground: hsl(0 0% 98%);
+.csdk-loader-thin-pulse {
+  animation: csdk-thin-pulse 1.5s ease-in-out infinite;
+}
 
-  --card: hsl(240 10% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
+.csdk-loader-pulse-dot {
+  animation: csdk-pulse-dot 1.2s ease-in-out infinite;
+}
 
-  --popover: hsl(240 10% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
+.csdk-loader-bounce-dots {
+  animation: csdk-bounce-dots 1.4s ease-in-out infinite;
+}
 
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(240 5.9% 10%);
+.csdk-loader-typing {
+  animation: csdk-typing 1s infinite;
+}
 
-  --secondary: hsl(240 3.7% 15.9%);
-  --secondary-foreground: hsl(0 0% 98%);
+.csdk-loader-wave {
+  animation: csdk-wave 1s ease-in-out infinite;
+}
 
-  --muted: hsl(240 3.7% 15.9%);
-  --muted-foreground: hsl(240 5% 64.9%);
+.csdk-loader-blink {
+  animation: csdk-blink 1s step-end infinite;
+}
 
-  --accent: hsl(240 3.7% 15.9%);
-  --accent-foreground: hsl(0 0% 98%);
+.csdk-loader-text-blink {
+  animation: csdk-text-blink 2s ease-in-out infinite;
+}
 
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
+.csdk-loader-shimmer {
+  animation: csdk-shimmer 4s infinite linear;
+}
 
-  --border: hsl(240 3.7% 15.9%);
-  --input: hsl(240 3.7% 15.9%);
-  --ring: hsl(240 4.9% 83.9%);
+.csdk-loader-loading-dots {
+  animation: csdk-loading-dots 1.4s infinite;
 }