sdaia-ui 1.6.4 → 1.6.5

package/dist/index.js

@@ -188,6 +188,89 @@ var GLASS_SURFACE_RULE = `/* \u2500\u2500 Liquid-glass surface \u2500\u2500\u250
     --ds-glass-bg-dark: rgba(38, 38, 38, 0.92);
   }
 }`;
+var MOTION_RULE = `/* \u2500\u2500 SDAIA motion \u2014 voice session + AI activity animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Consumed by sdaia-ui components (VoiceSession, AiThinkingIndicator,
+ * AiStatusIndicator, ThinkingPanel, ToolStatusRow, ToolCallCard,
+ * AgentActivity). All collapse to a static, fully readable state under
+ * prefers-reduced-motion. */
+@keyframes sdaia-voice-ripple {
+  0%   { transform: scale(0.45); opacity: 0.55; }
+  70%  { opacity: 0.12; }
+  100% { transform: scale(1);    opacity: 0; }
+}
+@keyframes sdaia-voice-breathe {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(1.06); }
+}
+@keyframes sdaia-voice-wave {
+  0%, 100% { transform: scaleY(0.32); }
+  50%      { transform: scaleY(1); }
+}
+
+/* \`backwards\` keeps delayed rings at the faded 0% frame during their
+ * animation-delay \u2014 otherwise they flash at full opacity on mount. */
+.voice-ripple   { transform-origin: center; animation: sdaia-voice-ripple 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite backwards; }
+.voice-breathe  { animation: sdaia-voice-breathe 2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+.voice-wave-bar { transform-origin: center; animation: sdaia-voice-wave 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-ripple, .voice-breathe, .voice-wave-bar { animation: none !important; }
+  .voice-wave-bar { transform: none !important; }
+  /* the rings are a solid brand fill (the keyframe fades them) \u2014 settle
+     them into a static pale halo when motion is off */
+  .voice-ripple { opacity: 0.15; }
+}
+
+@keyframes sdaia-ai-shimmer {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@keyframes sdaia-ai-dot-bounce {
+  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
+  30%           { opacity: 1;    transform: translateY(-3px); }
+}
+@keyframes sdaia-ai-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes sdaia-ai-rise-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+.ai-shimmer-text {
+  background-image: linear-gradient(
+    90deg,
+    currentColor 38%,
+    color-mix(in srgb, currentColor 30%, transparent) 50%,
+    currentColor 62%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: sdaia-ai-shimmer 1.8s linear infinite;
+}
+.ai-shimmer-muted { animation-duration: 2.4s; }
+/* Sweep follows the reading direction. */
+[dir="rtl"] .ai-shimmer-text { animation-direction: reverse; }
+
+.ai-dot-bounce { animation: sdaia-ai-dot-bounce 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+.ai-fade-in    { animation: sdaia-ai-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.ai-rise-in    { animation: sdaia-ai-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-shimmer-text {
+    animation: none !important;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+  .ai-dot-bounce, .ai-fade-in, .ai-rise-in {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}`;
 function isTailwindInstalled() {
   const pkgJsonPath = path3.resolve(process.cwd(), "package.json");
   if (!fs3.existsSync(pkgJsonPath)) return false;
@@ -254,6 +337,16 @@ ${GLASS_SURFACE_RULE}
 `);
   return true;
 }
+function ensureMotionRule(cssFilePath) {
+  const content = fs3.readFileSync(cssFilePath, "utf-8");
+  if (/@keyframes\s+sdaia-ai-shimmer\b/.test(content)) return false;
+  const trimmed = content.replace(/\s*$/, "");
+  fs3.writeFileSync(cssFilePath, `${trimmed}
+
+${MOTION_RULE}
+`);
+  return true;
+}
 async function init() {
   logger.break();
   logger.info("Initializing SDAIA Design System in your project...");
@@ -413,13 +506,23 @@ export default config;
     } else {
       logger.info("Liquid-glass surface styles already present in CSS file");
     }
+    const addedMotion = ensureMotionRule(cssFilePath);
+    if (addedMotion) {
+      logger.success(
+        `Added voice + AI motion styles to ${path3.relative(process.cwd(), cssFilePath)}`
+      );
+    } else {
+      logger.info("Voice + AI motion styles already present in CSS file");
+    }
   } else {
     logger.warn(
       `Could not find a CSS entry file. Add these to your main CSS file:
   ${TOKENS_IMPORT}
   ${DARK_VARIANT_RULE}
 
-${GLASS_SURFACE_RULE}`
+${GLASS_SURFACE_RULE}
+
+${MOTION_RULE}`
     );
   }
   const utilsPath = path3.resolve(process.cwd(), config.utilsDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdaia-ui",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "CLI for installing SDAIA Design System components into your project",
   "type": "module",
   "bin": {