@farming-labs/theme 0.0.2-beta.9 → 0.0.2

package/styles/ai.css

@@ -7,29 +7,46 @@
 
 /* ─── Animations ─────────────────────────────────────────────────── */
 
-@keyframes fd-ai-dot {
-  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
-  40% { transform: scale(1); opacity: 1; }
-}
-
 @keyframes fd-ai-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fd-ai-slide-up {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
-  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
 @keyframes fd-ai-float-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 @keyframes fd-ai-float-center-in {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
-  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
 /* ─── Overlay ────────────────────────────────────────────────────── */
@@ -254,7 +271,7 @@
   border-radius: var(--radius, 8px);
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.08));
   background: var(--color-fd-background, rgba(255, 255, 255, 0.01));
-  opacity: 0.6; 
+  opacity: 0.6;
   color: var(--color-fd-foreground, #e4e4e7);
   font-size: 13px;
   font-family: inherit;
@@ -313,6 +330,12 @@
   line-height: 1.6;
   max-width: 95%;
   word-break: break-word;
+  animation: fd-ai-msg-in 300ms ease-out;
+}
+
+@keyframes fd-ai-msg-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* ─── Chat input ─────────────────────────────────────────────────── */
@@ -367,59 +390,310 @@
   color: var(--color-fd-primary-foreground, #fff);
 }
 
-/* ─── Loading indicator ──────────────────────────────────────────── */
+/* ═══════════════════════════════════════════════════════════════════
+ * AI Loader variants — fd-ai-loader-*
+ * Default: "shimmer-dots" (shimmer text + typing dots in a row)
+ * ═══════════════════════════════════════════════════════════════════ */
 
-.fd-ai-loading {
+.fd-ai-loader {
   display: inline-flex;
+  align-items: center;
   gap: 6px;
+  animation: fd-ai-loader-in 300ms ease-out;
+}
+
+@keyframes fd-ai-loader-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── shimmer-dots (default): shimmer text + typing dots ──────────── */
+
+.fd-ai-loader-shimmer-text {
+  font-size: 13px;
+  font-weight: 500;
+  background: linear-gradient(
+    to right,
+    var(--color-fd-muted-foreground, #888) 40%,
+    var(--color-fd-foreground, #fff) 60%,
+    var(--color-fd-muted-foreground, #888) 80%
+  );
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: fd-ai-shimmer-text 3s linear infinite;
+}
+
+@keyframes fd-ai-shimmer-text {
+  0% { background-position: 150% center; }
+  100% { background-position: -150% center; }
+}
+
+.fd-ai-loader-typing-dots {
+  display: inline-flex;
   align-items: center;
+  gap: 2px;
 }
 
-.fd-ai-loading-text {
-  font-size: 12px;
-  color: var(--color-fd-muted-foreground, #888);
+.fd-ai-loader-typing-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-typing 1s infinite;
 }
 
-.fd-ai-loading-dots {
+.fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
+.fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
+
+@keyframes fd-ai-typing {
+  0%, 100% { transform: translateY(0); opacity: 0.5; }
+  50% { transform: translateY(-2px); opacity: 1; }
+}
+
+/* ── circular: spinning ring ─────────────────────────────────────── */
+
+.fd-ai-loader-circular {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-fd-primary, #6366f1);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: fd-ai-spin 0.8s linear infinite;
+}
+
+@keyframes fd-ai-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── dots: bouncing dots ─────────────────────────────────────────── */
+
+.fd-ai-loader-dots {
   display: inline-flex;
+  align-items: center;
   gap: 3px;
+}
+
+.fd-ai-loader-bounce-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-bounce-dots 1.4s ease-in-out infinite;
+}
+
+.fd-ai-loader-bounce-dot:nth-child(2) { animation-delay: 160ms; }
+.fd-ai-loader-bounce-dot:nth-child(3) { animation-delay: 320ms; }
+
+@keyframes fd-ai-bounce-dots {
+  0%, 100% { transform: scale(0.8); opacity: 0.5; }
+  50% { transform: scale(1.2); opacity: 1; }
+}
+
+/* ── wave: wave bars ─────────────────────────────────────────────── */
+
+.fd-ai-loader-wave {
+  display: inline-flex;
   align-items: center;
+  gap: 2px;
+  height: 16px;
+}
+
+.fd-ai-loader-wave-bar {
+  width: 2px;
+  border-radius: 2px;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-wave 1s ease-in-out infinite;
+}
+
+.fd-ai-loader-wave-bar:nth-child(1) { height: 6px; animation-delay: 0ms; }
+.fd-ai-loader-wave-bar:nth-child(2) { height: 10px; animation-delay: 100ms; }
+.fd-ai-loader-wave-bar:nth-child(3) { height: 14px; animation-delay: 200ms; }
+.fd-ai-loader-wave-bar:nth-child(4) { height: 10px; animation-delay: 300ms; }
+.fd-ai-loader-wave-bar:nth-child(5) { height: 6px; animation-delay: 400ms; }
+
+@keyframes fd-ai-wave {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(0.6); }
+}
+
+/* ── pulse: pulsing ring ─────────────────────────────────────────── */
+
+.fd-ai-loader-pulse {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-fd-primary, #6366f1);
+  border-radius: 50%;
+  animation: fd-ai-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes fd-ai-pulse {
+  0%, 100% { transform: scale(0.95); opacity: 0.8; }
+  50% { transform: scale(1.05); opacity: 0.4; }
 }
 
-.fd-ai-loading-dot {
-  width: 5px;
-  height: 5px;
+/* ── pulse-dot: pulsing dot ──────────────────────────────────────── */
+
+.fd-ai-loader-pulse-dot {
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: var(--color-fd-muted-foreground, #888);
-  animation: fd-ai-dot 1.4s infinite ease-in-out both;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-pulse-dot 1.2s ease-in-out infinite;
+}
+
+@keyframes fd-ai-pulse-dot {
+  0%, 100% { transform: scale(1); opacity: 0.8; }
+  50% { transform: scale(1.5); opacity: 1; }
+}
+
+/* ── terminal: blinking cursor ───────────────────────────────────── */
+
+.fd-ai-loader-terminal {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.fd-ai-loader-terminal-prompt {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  color: var(--color-fd-primary, #6366f1);
+}
+
+.fd-ai-loader-terminal-cursor {
+  width: 7px;
+  height: 14px;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-blink 1s step-end infinite;
+}
+
+@keyframes fd-ai-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* ── text-shimmer: shimmer text only ─────────────────────────────── */
+/* (reuses .fd-ai-loader-shimmer-text above) */
+
+/* ── text-blink: blinking text ───────────────────────────────────── */
+
+.fd-ai-loader-text-blink {
+  font-size: 13px;
+  font-weight: 500;
+  animation: fd-ai-text-blink 2s ease-in-out infinite;
+}
+
+@keyframes fd-ai-text-blink {
+  0%, 100% { color: var(--color-fd-primary, #6366f1); }
+  50% { color: var(--color-fd-muted-foreground, #888); }
+}
+
+/* ── loading-dots: "Thinking..." with animated dots ──────────────── */
+
+.fd-ai-loader-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-fd-primary, #6366f1);
+}
+
+.fd-ai-loader-text-dots {
+  display: inline-flex;
 }
 
-.fd-ai-loading-dot:nth-child(2) { animation-delay: 0.16s; }
-.fd-ai-loading-dot:nth-child(3) { animation-delay: 0.32s; }
+.fd-ai-loader-text-dot {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-loading-dots 1.4s infinite;
+}
+
+.fd-ai-loader-text-dot:nth-child(1) { animation-delay: 200ms; }
+.fd-ai-loader-text-dot:nth-child(2) { animation-delay: 400ms; }
+.fd-ai-loader-text-dot:nth-child(3) { animation-delay: 600ms; }
+
+@keyframes fd-ai-loading-dots {
+  0%, 100% { opacity: 0; }
+  50% { opacity: 1; }
+}
+
+/* ── bars: thick wave bars ───────────────────────────────────────── */
+
+.fd-ai-loader-bars {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 3px;
+  height: 16px;
+}
+
+.fd-ai-loader-bar {
+  width: 4px;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-wave-bars 1.2s ease-in-out infinite;
+}
+
+.fd-ai-loader-bar:nth-child(1) { animation-delay: 0s; }
+.fd-ai-loader-bar:nth-child(2) { animation-delay: 0.2s; }
+.fd-ai-loader-bar:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes fd-ai-wave-bars {
+  0%, 100% { transform: scaleY(1); opacity: 0.5; }
+  50% { transform: scaleY(0.6); opacity: 1; }
+}
+
+/* ─── Streaming cursor ───────────────────────────────────────────── */
+
+.fd-ai-streaming::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: var(--color-fd-primary, #6366f1);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: fd-ai-cursor-blink 0.8s step-end infinite;
+}
+
+@keyframes fd-ai-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
 
 /* ─── Floating trigger button ────────────────────────────────────── */
 
 .fd-ai-floating-btn {
   position: fixed;
   z-index: 9997;
-  width: 52px;
-  height: 52px;
-  border-radius: var(--radius, 26px);
-  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
-  background: var(--color-fd-primary, #6366f1);
-  color: var(--color-fd-primary-foreground, #fff);
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
-  transition: all 200ms;
+  gap: 8px;
+  padding: 8px 12px;
+  height: 40px;
+  border-radius: 16px;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
+  backdrop-filter: blur(4px);
+  color: var(--color-fd-muted-foreground, #71717a);
+  cursor: pointer;
+  font-size: 14px;
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
+  transition:
+    transform 150ms,
+    background 150ms,
+    color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
 }
 
 .fd-ai-floating-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0 10px 40px color-mix(in srgb, var(--color-fd-primary, #6366f1) 40%, transparent);
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+  transform: scale(1.03);
+}
+
+.fd-ai-floating-btn:active {
+  transform: scale(0.97);
 }
 
 .fd-ai-floating-trigger {
@@ -492,7 +766,7 @@
   margin: 10px 0;
   border-radius: var(--radius, 8px);
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
-  /* background: var(--color-fd-muted, #1a1a2e); */
+  background: var(--color-fd-muted, #1a1a2e);
   overflow: hidden;
 }
 
@@ -528,7 +802,11 @@
 
 .fd-ai-code-copy:hover {
   color: var(--color-fd-foreground, #e4e4e7);
-  background: color-mix(in srgb, var(--color-fd-accent, rgba(255,255,255,0.05)) 60%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.05)) 60%,
+    transparent
+  );
 }
 
 .fd-ai-code-block pre {
@@ -550,7 +828,10 @@
 }
 
 /* sugar-high: each line is a block span, min-height keeps empty lines visible */
-.fd-ai-code-block .sh__line { display: block; min-height: 1.2em; }
+.fd-ai-code-block .sh__line {
+  display: block;
+  min-height: 1.2em;
+}
 
 /* ═══════════════════════════════════════════════════════════════════
  * Full-Modal (better-auth inspired) — fd-ai-fm-*
@@ -607,8 +888,20 @@
   overflow-y: auto;
   width: min(800px, 100%);
   padding: 24px 0 120px;
-  mask-image: linear-gradient(to bottom, transparent, white 3rem, white calc(100% - 8rem), transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, transparent, white 3rem, white calc(100% - 8rem), transparent 100%);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    white 3rem,
+    white calc(100% - 8rem),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    white 3rem,
+    white calc(100% - 8rem),
+    transparent 100%
+  );
 }
 
 .fd-ai-fm-messages-inner {
@@ -683,36 +976,17 @@
 
 /* ─── Thinking dots ──────────────────────────────────────────────── */
 
-.fd-ai-fm-thinking {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.fd-ai-fm-thinking-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: var(--color-fd-primary, #6366f1);
-  animation: fd-ai-fm-bounce 1s infinite ease-in-out;
-}
-
-.fd-ai-fm-thinking-dot:nth-child(2) { animation-delay: 150ms; }
-.fd-ai-fm-thinking-dot:nth-child(3) { animation-delay: 300ms; }
-
-@keyframes fd-ai-fm-bounce {
-  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-  40% { transform: scale(1); opacity: 1; }
-}
+/* Full-modal now uses the shared .fd-ai-loader indicator */
 
 /* ─── Bottom input bar ───────────────────────────────────────────── */
 
 .fd-ai-fm-input-bar {
   position: fixed;
   z-index: 9999;
-  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-              height 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-              transform 200ms ease-out;
+  transition:
+    width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    height 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 200ms ease-out;
 }
 
 .fd-ai-fm-input-bar--closed {
@@ -722,6 +996,7 @@
 .fd-ai-fm-input-bar--open {
   bottom: 16px;
   left: 50%;
+  right: auto;
   transform: translateX(-50%);
   width: min(800px, calc(100vw - 32px));
 }
@@ -800,8 +1075,20 @@
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 4px;
-  mask-image: linear-gradient(to right, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
+  mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 1rem,
+    black calc(100% - 1rem),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 1rem,
+    black calc(100% - 1rem),
+    transparent 100%
+  );
 }
 
 .fd-ai-fm-suggestion {
@@ -811,15 +1098,16 @@
   font-size: 12px;
   font-family: inherit;
   border-radius: 9999px;
-  border: 1px solid color-mix(in srgb, var(--color-fd-border, rgba(255,255,255,0.1)) 50%, transparent);
-  background: color-mix(in srgb, var(--color-fd-muted, rgba(255,255,255,0.04)) 30%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--color-fd-border, rgba(255, 255, 255, 0.1)) 50%, transparent);
+  background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 30%, transparent);
   color: var(--color-fd-muted-foreground, #71717a);
   cursor: pointer;
   transition: all 200ms;
 }
 
 .fd-ai-fm-suggestion:hover {
-  background: color-mix(in srgb, var(--color-fd-muted, rgba(255,255,255,0.04)) 50%, transparent);
+  background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 50%, transparent);
   color: var(--color-fd-foreground, #e4e4e7);
   border-color: var(--color-fd-border, rgba(255, 255, 255, 0.1));
 }
@@ -832,7 +1120,11 @@
   gap: 4px;
   padding: 8px 16px;
   border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
-  background: color-mix(in srgb, var(--color-fd-accent, rgba(255,255,255,0.03)) 40%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
+    transparent
+  );
   font-size: 12px;
   color: var(--color-fd-muted-foreground, #71717a);
 }
@@ -864,6 +1156,34 @@
   flex: 1;
 }
 
+/* ─── Pure AI Modal footer ───────────────────────────────────────── */
+
+.fd-ai-modal-pure {
+  display: flex;
+  flex-direction: column;
+}
+
+.fd-ai-modal-footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
+  background: color-mix(
+    in srgb,
+    var(--color-fd-accent, rgba(255, 255, 255, 0.03)) 40%,
+    transparent
+  );
+  font-size: 12px;
+  color: var(--color-fd-muted-foreground, #71717a);
+  border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
+  flex-shrink: 0;
+}
+
+.fd-ai-modal-footer-hint {
+  flex: 1;
+}
+
 /* ─── Closed trigger button ──────────────────────────────────────── */
 
 .fd-ai-fm-trigger-btn {
@@ -871,24 +1191,31 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 8px 16px;
+  padding: 8px 12px;
   height: 40px;
-  border-radius: var(--radius, 16px);
+  border-radius: 16px;
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
-  background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
+  background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
+  backdrop-filter: blur(4px);
   color: var(--color-fd-muted-foreground, #71717a);
   font-family: inherit;
   font-size: 14px;
   cursor: pointer;
-  backdrop-filter: blur(8px);
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-fd-background, #000) 40%, transparent);
-  transition: all 200ms;
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
+  transition:
+    transform 150ms,
+    background 150ms,
+    color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
   white-space: nowrap;
 }
 
 .fd-ai-fm-trigger-btn:hover {
-  background: var(--color-fd-accent, rgba(255, 255, 255, 0.1));
-  color: var(--color-fd-accent-foreground, #fff);
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
   transform: scale(1.03);
 }
+
+.fd-ai-fm-trigger-btn:active {
+  transform: scale(0.97);
+}