@vanira/sdk-react-native 0.0.2

package/src/ui/styles/index.ts

@@ -0,0 +1,323 @@
+import { MALE_ICON_BASE64, FEMALE_ICON_BASE64 } from '../icons_data';
+
+export const icons = {
+  phone: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+    </svg>
+  `,
+  close: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"/>
+      <line x1="6" y1="6" x2="18" y2="18"/>
+    </svg>
+  `,
+  refresh: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+      <path d="M3 3v5h5"/>
+      <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
+      <path d="M16 16h5v5"/>
+    </svg>
+  `,
+  mic: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/>
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+      <line x1="12" y1="19" x2="12" y2="22"/>
+    </svg>
+  `,
+  micOff: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="1" y1="1" x2="23" y2="23"/>
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/>
+      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/>
+      <line x1="12" y1="19" x2="12" y2="23"/>
+    </svg>
+  `,
+  waves: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+      <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+      <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+    </svg>
+  `,
+  send: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="22" y1="2" x2="11" y2="13"/>
+      <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+    </svg>
+  `,
+  chat: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    </svg>
+  `,
+  video: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="23 7 16 12 23 17 23 7"/>
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
+    </svg>
+  `,
+  talkToAgent: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" opacity="0.3"/>
+      <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/>
+      <circle cx="12" cy="12" r="2"/>
+    </svg>
+  `,
+  sparkles: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2l2.5 6.5L21 11l-6.5 2.5L12 20l-2.5-6.5L3 11l6.5-2.5L12 2z"/>
+      <path d="M18 2l1.5 3.5L23 7l-3.5 1.5L18 12l-1.5-3.5L13 7l3.5-1.5L18 2z" opacity="0.6"/>
+      <path d="M6 12l1.5 3.5L11 17l-3.5 1.5L6 22l-1.5-3.5L1 17l3.5-1.5L6 12z" opacity="0.6"/>
+    </svg>
+  `,
+  audioLines: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M2 10v3"/>
+      <path d="M6 6v11"/>
+      <path d="M10 3v18"/>
+      <path d="M14 8v7"/>
+      <path d="M18 5v13"/>
+      <path d="M22 10v3"/>
+    </svg>
+  `,
+  maximize2: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 3 21 3 21 9"/>
+      <polyline points="9 21 3 21 3 15"/>
+      <line x1="21" y1="3" x2="14" y2="10"/>
+      <line x1="3" y1="21" x2="10" y2="14"/>
+    </svg>
+  `,
+  minimize2: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="4 14 10 14 10 20"/>
+      <polyline points="20 10 14 10 14 4"/>
+      <line x1="14" y1="10" x2="21" y2="3"/>
+      <line x1="3" y1="21" x2="10" y2="14"/>
+    </svg>
+  `,
+  user: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+      <circle cx="12" cy="7" r="4"/>
+    </svg>
+  `,
+  keyboard: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="2" y="4" width="20" height="16" rx="2" ry="2"/>
+      <line x1="6" y1="8" x2="6" y2="8"/>
+      <line x1="10" y1="8" x2="10" y2="8"/>
+      <line x1="14" y1="8" x2="14" y2="8"/>
+      <line x1="18" y1="8" x2="18" y2="8"/>
+      <line x1="6" y1="12" x2="6" y2="12"/>
+      <line x1="10" y1="12" x2="10" y2="12"/>
+      <line x1="14" y1="12" x2="14" y2="12"/>
+      <line x1="18" y1="12" x2="18" y2="12"/>
+      <line x1="7" y1="16" x2="17" y2="16"/>
+    </svg>
+  `,
+  voice_orb: `
+    <div style="display: flex; align-items: center; justify-content: center; gap: 3px; height: 100%; width: 100%;">
+      <div style="width: 3px; height: 10px; background: white; border-radius: 10px; animation: voice-bars-orb 1.2s infinite ease-in-out; animation-delay: 0s;"></div>
+      <div style="width: 3px; height: 18px; background: white; border-radius: 10px; animation: voice-bars-orb 1.2s infinite ease-in-out; animation-delay: 0.2s;"></div>
+      <div style="width: 3px; height: 14px; background: white; border-radius: 10px; animation: voice-bars-orb 1.2s infinite ease-in-out; animation-delay: 0.4s;"></div>
+      <div style="width: 3px; height: 22px; background: white; border-radius: 10px; animation: voice-bars-orb 1.2s infinite ease-in-out; animation-delay: 0.1s;"></div>
+      <div style="width: 3px; height: 12px; background: white; border-radius: 10px; animation: voice-bars-orb 1.2s infinite ease-in-out; animation-delay: 0.3s;"></div>
+    </div>
+  `
+};
+
+export const industryIcons: Record<string, string> = {
+  automotive: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/>
+      <circle cx="7" cy="17" r="2"/>
+      <path d="M9 17h6"/>
+      <circle cx="17" cy="17" r="2"/>
+    </svg>
+  `,
+  education: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
+      <path d="M6 12v5c3 3 9 3 12 0v-5"/>
+    </svg>
+  `,
+  finance: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="3" y1="21" x2="21" y2="21"/>
+      <line x1="6" y1="21" x2="6" y2="12"/>
+      <line x1="18" y1="21" x2="18" y2="12"/>
+      <line x1="6" y1="12" x2="18" y2="12"/>
+      <path d="M5 6 L12 2 L19 6"/>
+      <line x1="6" y1="6" x2="6" y2="12"/>
+      <line x1="18" y1="6" x2="18" y2="12"/>
+      <line x1="10" y1="21" x2="10" y2="12"/>
+      <line x1="14" y1="21" x2="14" y2="12"/>
+    </svg>
+  `,
+  fitness: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m6.5 6.5 11 11"/>
+      <path d="m21 21-1-1"/>
+      <path d="m3 3 1 1"/>
+      <path d="m18 22 4-4"/>
+      <path d="m2 6 4-4"/>
+      <path d="m3 10 7-7"/>
+      <path d="m14 21 7-7"/>
+    </svg>
+  `,
+  food: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/>
+      <path d="M7 2v20"/>
+      <path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>
+    </svg>
+  `,
+  government: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/>
+      <path d="M9 22v-4h6v4"/>
+      <path d="M8 6h.01"/>
+      <path d="M16 6h.01"/>
+      <path d="M12 6h.01"/>
+      <path d="M12 10h.01"/>
+      <path d="M12 14h.01"/>
+      <path d="M16 10h.01"/>
+      <path d="M16 14h.01"/>
+      <path d="M8 10h.01"/>
+      <path d="M8 14h.01"/>
+    </svg>
+  `,
+  healthcare: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+    </svg>
+  `,
+  travel: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2a5 5 0 0 1 5 5c0 4.5-9 13-9 13S3 11.5 3 7a5 5 0 0 1 10 0Z"/>
+      <circle cx="12" cy="7" r="2"/>
+    </svg>
+  `,
+  legal: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/>
+      <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/>
+      <path d="M7 21h10"/>
+      <path d="M12 3v18"/>
+      <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>
+    </svg>
+  `,
+  manufacturing: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/>
+      <path d="M17 18h1"/>
+      <path d="M12 18h1"/>
+      <path d="M7 18h1"/>
+    </svg>
+  `,
+  media: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/>
+      <line x1="7" x2="7" y1="2" y2="22"/>
+      <line x1="17" x2="17" y1="2" y2="22"/>
+      <line x1="2" x2="22" y1="12" y2="12"/>
+      <line x1="2" x2="7" y1="7" y2="7"/>
+      <line x1="2" x2="7" y1="17" y2="17"/>
+      <line x1="17" x2="22" y1="17" y2="17"/>
+      <line x1="17" x2="22" y1="7" y2="7"/>
+    </svg>
+  `,
+  nonprofit: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
+    </svg>
+  `,
+  professional: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect width="20" height="14" x="2" y="7" rx="2" ry="2"/>
+      <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+    </svg>
+  `,
+  realestate: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+      <polyline points="9 22 9 12 15 12 15 22"/>
+    </svg>
+  `,
+  retail: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
+      <path d="M3 6h18"/>
+      <path d="M16 10a4 4 0 0 1-8 0"/>
+    </svg>
+  `,
+  technology: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect width="18" height="12" x="3" y="4" rx="2" ry="2"/>
+      <line x1="2" x2="22" y1="20" y2="20"/>
+    </svg>
+  `
+};
+
+export const widgetIcons: Record<string, string> = {
+  ...industryIcons,
+  default_chat: icons.chat,
+  default_voice: icons.mic,
+  voice_orb: icons.voice_orb,
+  male: `<img src="${MALE_ICON_BASE64}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;" />`,
+  female: `<img src="${FEMALE_ICON_BASE64}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;" />`,
+};
+
+Object.entries(industryIcons).forEach(([name, svg]) => {
+  widgetIcons[`male_${name} `] = `
+  < div style = "position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%;" >
+    <div style="width: 60%; height: 60%; color: #000000;" >
+      ${svg}
+</div>
+  < div style = "
+position: absolute;
+bottom: -2px;
+right: -2px;
+width: 28px;
+height: 28px;
+background: white;
+border - radius: 50 %;
+border: 2px solid white;
+box - shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+overflow: hidden;
+">
+  < img src = "${MALE_ICON_BASE64}" style = "width: 100%; height: 100%; object-fit: cover;" />
+    </div>
+    </div>
+      `;
+
+  widgetIcons[`female_${name} `] = `
+  < div style = "position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%;" >
+    <div style="width: 60%; height: 60%; color: #000000;" >
+      ${svg}
+</div>
+  < div style = "
+position: absolute;
+bottom: -2px;
+right: -2px;
+width: 28px;
+height: 28px;
+background: white;
+border - radius: 50 %;
+border: 2px solid white;
+box - shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+overflow: hidden;
+">
+  < img src = "${FEMALE_ICON_BASE64}" style = "width: 100%; height: 100%; object-fit: cover;" />
+    </div>
+    </div>
+      `;
+});
+
+export * from './theme';
+export * from './widget.css';
+export * from './keyframes';

package/src/ui/styles/keyframes.ts

@@ -0,0 +1,76 @@
+
+export const keyframes = `
+  @keyframes fadeInScale {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes wave {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+  }
+
+  @keyframes wave-rotate-1 {
+    0% { transform: rotate(0deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+    25% { transform: rotate(90deg) scale(1.02); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
+    50% { transform: rotate(180deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+    75% { transform: rotate(270deg) scale(0.98); border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
+    100% { transform: rotate(360deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+  }
+
+  @keyframes wave-rotate-2 {
+    0% { transform: rotate(60deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
+    33% { transform: rotate(180deg) scale(0.98); border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
+    66% { transform: rotate(300deg) scale(1.02); border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }
+    100% { transform: rotate(420deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
+  }
+
+  @keyframes wave-rotate-3 {
+    0% { transform: rotate(120deg) scale(1); border-radius: 50% 50% 50% 50%; }
+    50% { transform: rotate(300deg) scale(1.05); border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%; }
+    100% { transform: rotate(480deg) scale(1); border-radius: 50% 50% 50% 50%; }
+  }
+
+  @keyframes clickBounce {
+    0% { transform: scale(1); }
+    25% { transform: scale(0.9) rotate(-5deg); }
+    50% { transform: scale(1.15) rotate(5deg); }
+    75% { transform: scale(0.95) rotate(-2deg); }
+    100% { transform: scale(1) rotate(0deg); }
+  }
+
+  @keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4); }
+    50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6), 0 0 32px rgba(239, 68, 68, 0.3); }
+  }
+
+  @keyframes typingBounce {
+    0%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-6px); }
+  }
+
+  @keyframes floatOrb {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+
+  @keyframes pulseGlowIdle {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
+    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes voice-bars-orb {
+    0%, 100% { transform: scaleY(1); opacity: 0.7; }
+    50% { transform: scaleY(1.8); opacity: 1; }
+  }
+`;

package/src/ui/styles/theme.ts

@@ -0,0 +1,57 @@
+export const theme = {
+    colors: {
+        primary: 'var(--primary, #000000)',
+        primaryHover: 'var(--primary-hover, #111111)',
+        secondary: 'var(--secondary, #111111)',
+        bg: 'var(--bg, #ffffff)',
+        text: 'var(--text, #1f2937)',
+        textMuted: 'var(--text-muted, #6b7280)',
+        border: 'var(--border, #e5e7eb)',
+        danger: '#ef4444',
+        success: '#10b981',
+        white: '#ffffff',
+    },
+    shadows: {
+        base: 'var(--shadow, 0 10px 40px rgba(0, 0, 0, 0.1))',
+        lg: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.15))',
+    },
+    transitions: {
+        base: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        smooth: 'all 0.5s ease',
+    },
+    fonts: {
+        base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    }
+};
+
+export const hexToRgb = (hex: string) => {
+    // Remove the hash if it's there
+    hex = hex.replace(/^#/, '');
+    
+    // Parse the hex values
+    let r, g, b;
+    if (hex.length === 3) {
+        r = parseInt(hex.charAt(0) + hex.charAt(0), 16);
+        g = parseInt(hex.charAt(1) + hex.charAt(1), 16);
+        b = parseInt(hex.charAt(2) + hex.charAt(2), 16);
+    } else {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+    }
+    
+    return isNaN(r) || isNaN(g) || isNaN(b) ? '0, 0, 0' : `${r}, ${g}, ${b}`;
+};
+
+export const generateThemeVars = (primary: string, secondary: string | null) => {
+    const primaryRgb = hexToRgb(primary);
+    const secondaryRgb = hexToRgb(secondary || primary);
+    
+    return `
+        --primary: ${primary};
+        --primary-rgb: ${primaryRgb};
+        --primary-hover: ${secondary || primary};
+        --secondary: ${secondary || primary};
+        --secondary-rgb: ${secondaryRgb};
+    `;
+};