@alia.onl/sdk 3.1.0 → 3.1.2

package/src/components/Markdown.tsx

@@ -1,14 +1,33 @@
 import React, { useMemo } from 'react';
-import { View, Text, Platform, Linking } from 'react-native';
+import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
 import Markdown from 'react-native-markdown-display';
-import { useAliaColors } from '../theme';
+import type { AliaColors } from '../theme';
+
+// Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
+// The main app always passes resolved colors via the `colors` prop.
+const FALLBACK_LIGHT: Pick<AliaColors, 'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'> = {
+  text: '#11181C',
+  muted: '#F4F4F5',
+  border: '#E5E5EA',
+  primary: '#7C3AED',
+  mutedForeground: '#71717A',
+};
+const FALLBACK_DARK: typeof FALLBACK_LIGHT = {
+  text: '#ECEDEE',
+  muted: '#27272A',
+  border: '#2C2C2E',
+  primary: '#A78BFA',
+  mutedForeground: '#A1A1AA',
+};
 
 const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
 const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
 const SANS_FONT = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' })!;
 const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
 
-function createRules(isDark: boolean, textColor: string) {
+function createRules(colors: AliaColors) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
+
   return {
     heading1: (node: any, children: any) => (
       <Text
@@ -66,9 +85,9 @@ function createRules(isDark: boolean, textColor: string) {
             marginVertical: 8,
             overflow: 'hidden',
             borderRadius: 6,
-            backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+            backgroundColor: muted,
             borderWidth: 1,
-            borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+            borderColor: border,
             padding: 12,
           }}
         >
@@ -78,7 +97,7 @@ function createRules(isDark: boolean, textColor: string) {
         <Text
           key={node.key}
           style={{
-            backgroundColor: isDark ? '#27272a' : '#f4f4f5',
+            backgroundColor: muted,
             paddingHorizontal: 4,
             paddingVertical: 1,
             fontSize: 13,
@@ -98,7 +117,7 @@ function createRules(isDark: boolean, textColor: string) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: '#71717A' }}>{bullet}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>{bullet}</Text>
           <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
@@ -115,7 +134,7 @@ function createRules(isDark: boolean, textColor: string) {
     link: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline', ...BODY_TEXT }}
+        style={{ color: primary, textDecorationLine: 'underline', ...BODY_TEXT }}
         onPress={() => {
           if (node.attributes?.href) Linking.openURL(node.attributes.href);
         }}
@@ -132,8 +151,8 @@ function createRules(isDark: boolean, textColor: string) {
         style={{
           marginVertical: 8,
           borderLeftWidth: 4,
-          borderLeftColor: isDark ? '#52525b' : '#d4d4d8',
-          backgroundColor: isDark ? 'rgba(39,39,42,0.5)' : 'rgba(244,244,245,0.5)',
+          borderLeftColor: border,
+          backgroundColor: muted,
           paddingHorizontal: 12,
           paddingVertical: 4,
           borderTopRightRadius: 6,
@@ -149,20 +168,19 @@ function createRules(isDark: boolean, textColor: string) {
         style={{
           marginVertical: 16,
           height: 1,
-          backgroundColor: isDark ? '#3f3f46' : '#d4d4d8',
+          backgroundColor: border,
         }}
       />
     ),
-    text: (node: any) => {
-      return node.content;
-    },
     body: (node: any, children: any) => {
-      return <View key={node.key}>{children}</View>;
+      return <View key={node.key} style={{ marginBottom: -8 }}>{children}</View>;
     },
   };
 }
 
-function createStyles(isDark: boolean, textColor: string, borderColor: string, mutedBg: string) {
+function createStyles(colors: AliaColors) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
+
   return {
     body: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
     text: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
@@ -170,14 +188,14 @@ function createStyles(isDark: boolean, textColor: string, borderColor: string, m
     strong: { fontWeight: '600' as const },
     em: { fontStyle: 'italic' as const },
     s: { textDecorationLine: 'line-through' as const },
-    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
-    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
+    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
+    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
     bullet_list_content: { flex: 1 },
     ordered_list_content: { flex: 1 },
     code_inline: {
       fontSize: 13,
       fontFamily: MONO_FONT,
-      backgroundColor: isDark ? '#27272a' : '#f4f4f5',
+      backgroundColor: muted,
       borderWidth: 0,
       borderRadius: 3,
       paddingHorizontal: 4,
@@ -186,28 +204,28 @@ function createStyles(isDark: boolean, textColor: string, borderColor: string, m
     code_block: {
       fontSize: 13,
       fontFamily: MONO_FONT,
-      backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+      backgroundColor: muted,
       borderWidth: 1,
-      borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+      borderColor: border,
       borderRadius: 6,
       padding: 12,
     },
     fence: {
       fontSize: 13,
       fontFamily: MONO_FONT,
-      backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+      backgroundColor: muted,
       borderWidth: 1,
-      borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+      borderColor: border,
       borderRadius: 6,
       padding: 12,
     },
-    table: { borderWidth: 1, borderColor, borderRadius: 6, marginVertical: 8 },
-    thead: { backgroundColor: mutedBg },
-    th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT },
-    td: { flex: 1, padding: 8, ...BODY_TEXT },
-    tr: { borderBottomWidth: 1, borderColor, flexDirection: 'row' as const },
-    link: { textDecorationLine: 'underline' as const, color: isDark ? '#60a5fa' : '#2563eb', ...BODY_TEXT },
-    hr: { backgroundColor: isDark ? '#3f3f46' : '#d4d4d8', height: 1, marginVertical: 16 },
+    table: { borderWidth: 1, borderColor: border, borderRadius: 12, marginVertical: 8, overflow: 'hidden' as const },
+    thead: { backgroundColor: muted },
+    th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT, color: textColor },
+    td: { flex: 1, padding: 8, ...BODY_TEXT, color: textColor },
+    tr: { borderBottomWidth: 1, borderColor: border, flexDirection: 'row' as const },
+    link: { textDecorationLine: 'underline' as const, color: primary, ...BODY_TEXT },
+    hr: { backgroundColor: border, height: 1, marginVertical: 16 },
     heading1: { fontSize: 18, fontWeight: '600' as const },
     heading2: { ...HEADING_TEXT, fontWeight: '600' as const },
     heading3: { ...HEADING_TEXT, fontWeight: '600' as const },
@@ -217,16 +235,18 @@ function createStyles(isDark: boolean, textColor: string, borderColor: string, m
   };
 }
 
-export function AliaMarkdown({ content }: { content: string }) {
-  const colors = useAliaColors();
-  const isDark = colors.isDark;
-  const textColor = isDark ? '#ffffff' : '#0a0a0a';
+export interface AliaMarkdownProps {
+  content: string;
+  colors?: Partial<AliaColors>;
+}
+
+export function AliaMarkdown({ content, colors: colorOverrides }: AliaMarkdownProps) {
+  const scheme = useColorScheme();
+  const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
+  const colors = { ...fallback, ...colorOverrides } as AliaColors;
 
-  const customRules = useMemo(() => createRules(isDark, textColor), [isDark]);
-  const markdownStyles = useMemo(
-    () => createStyles(isDark, textColor, colors.border, colors.muted),
-    [isDark, colors.border, colors.muted],
-  );
+  const customRules = useMemo(() => createRules(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
+  const markdownStyles = useMemo(() => createStyles(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
 
   return <Markdown rules={customRules} style={markdownStyles}>{content}</Markdown>;
 }

package/src/components/PlanPreviewCard.tsx

@@ -2,7 +2,8 @@ import { View, Pressable } from 'react-native';
 import { Text } from './ui/text';
 import { Button } from './ui/button';
 import { Check, X, ListChecks } from 'lucide-react-native';
-import Animated, { FadeInUp } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+import { planPreviewEnter } from '../animations';
 import type { PlanStep } from '../types';
 
 interface PlanPreviewCardProps {
@@ -33,7 +34,7 @@ export function PlanPreviewCard({ steps, onApprove, onReject, approved, rejected
   }
 
   return (
-    <Animated.View entering={FadeInUp.springify()}>
+    <Animated.View entering={planPreviewEnter}>
       <View className="border border-border rounded-xl bg-card p-4 gap-3 my-2">
         <View className="flex-row items-center gap-2">
           <ListChecks size={16} className="text-foreground" />

package/src/components/Reasoning.tsx

@@ -8,7 +8,7 @@ import Animated, {
   withSequence,
   cancelAnimation,
 } from 'react-native-reanimated';
-import { useAliaColors } from '../theme';
+
 
 // Context
 type ReasoningContextType = {
@@ -80,7 +80,6 @@ export function Reasoning({ isStreaming = false, defaultOpen = true, duration: e
 // Trigger — shows "Thinking for Xs..." label with pulsing icon
 export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
   const { isStreaming, isOpen, setIsOpen, duration } = useReasoning();
-  const colors = useAliaColors();
   const pulseOpacity = useSharedValue(1);
 
   useEffect(() => {
@@ -114,7 +113,6 @@ export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
 // Content — renders thinking text (collapsible)
 export function ReasoningContent({ children }: ReasoningContentProps) {
   const { isOpen, isStreaming } = useReasoning();
-  const colors = useAliaColors();
 
   if (!isOpen) return null;
 

package/src/components/ResearchProgressCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { View, Pressable } from 'react-native';
 import { Text } from './ui/text';
+import { cn } from '../lib/utils';
 import {
   Search,
   BookOpen,
@@ -10,7 +11,6 @@ import {
   ExternalLink,
   Loader2,
 } from 'lucide-react-native';
-import { useAliaColors } from '../theme';
 import type { ResearchProgress } from '../types';
 
 interface ResearchProgressCardProps {
@@ -30,7 +30,6 @@ const PHASE_LABELS: Record<string, string> = {
 const PHASE_ORDER = ['decomposing', 'searching', 'synthesizing', 'follow_up', 'finalizing', 'complete'];
 
 export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
-  const colors = useAliaColors();
   const [showSources, setShowSources] = useState(false);
   const [showQuestions, setShowQuestions] = useState(true);
 
@@ -43,9 +42,9 @@ export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
       <View className="flex-row items-center gap-2">
         <View className="w-8 h-8 rounded-full bg-primary/10 items-center justify-center">
           {isComplete ? (
-            <CheckCircle size={16} color="#22c55e" />
+            <CheckCircle size={16} className="text-green-500" />
           ) : (
-            <Search size={16} color={colors.tint} />
+            <Search size={16} className="text-primary" />
           )}
         </View>
         <View className="flex-1">
@@ -70,12 +69,12 @@ export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
         {PHASE_ORDER.map((phase, i) => (
           <View
             key={phase}
-            className="flex-1 h-1 rounded-full"
-            style={{
-              backgroundColor: i <= phaseIndex
-                ? (isComplete ? '#22c55e' : colors.tint)
-                : colors.muted,
-            }}
+            className={cn(
+              'flex-1 h-1 rounded-full',
+              i <= phaseIndex
+                ? (isComplete ? 'bg-green-500' : 'bg-primary')
+                : 'bg-muted',
+            )}
           />
         ))}
       </View>
@@ -87,14 +86,14 @@ export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
             onPress={() => setShowQuestions(!showQuestions)}
             className="flex-row items-center gap-1 mb-1"
           >
-            <BookOpen size={12} color={colors.secondaryText} />
+            <BookOpen size={12} className="text-muted-foreground" />
             <Text className="text-xs font-medium text-muted-foreground">
               Research angles ({progress.subQuestions.length})
             </Text>
             {showQuestions ? (
-              <ChevronUp size={12} color={colors.secondaryText} />
+              <ChevronUp size={12} className="text-muted-foreground" />
             ) : (
-              <ChevronDown size={12} color={colors.secondaryText} />
+              <ChevronDown size={12} className="text-muted-foreground" />
             )}
           </Pressable>
           {showQuestions && (
@@ -112,7 +111,7 @@ export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
       {/* Current search query indicator */}
       {progress.currentQuery && !isComplete && (
         <View className="flex-row items-center gap-2 bg-muted/50 rounded-lg px-3 py-1.5">
-          <Loader2 size={12} color={colors.secondaryText} />
+          <Loader2 size={12} className="text-muted-foreground" />
           <Text className="text-xs text-muted-foreground flex-1" numberOfLines={1}>
             {progress.currentQuery}
           </Text>
@@ -126,14 +125,14 @@ export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
             onPress={() => setShowSources(!showSources)}
             className="flex-row items-center gap-1"
           >
-            <ExternalLink size={12} color={colors.secondaryText} />
+            <ExternalLink size={12} className="text-muted-foreground" />
             <Text className="text-xs font-medium text-muted-foreground">
               Sources ({progress.sources.length})
             </Text>
             {showSources ? (
-              <ChevronUp size={12} color={colors.secondaryText} />
+              <ChevronUp size={12} className="text-muted-foreground" />
             ) : (
-              <ChevronDown size={12} color={colors.secondaryText} />
+              <ChevronDown size={12} className="text-muted-foreground" />
             )}
           </Pressable>
           {showSources && (

package/src/components/ThinkingIndicator.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text } from "react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,7 +8,6 @@ import Animated, {
   withSequence,
   Easing,
 } from "react-native-reanimated";
-import { useAliaColors } from "../theme";
 
 const thinkingPhrases = [
   "Thinking...",
@@ -33,7 +32,6 @@ const workingPhrases = [
 ];
 
 export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking?: boolean; statusText?: string }) {
-  const colors = useAliaColors();
   const phrases = isWorking ? workingPhrases : thinkingPhrases;
   const [phraseIndex, setPhraseIndex] = useState(() =>
     Math.floor(Math.random() * phrases.length)
@@ -104,31 +102,18 @@ export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking
   const shownText = statusText || displayText;
 
   return (
-    <View style={styles.container}>
+    <View className="flex-row items-center gap-2 py-2">
       <Animated.View style={spinStyle}>
-        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>✱</Text>
+        <Text className="text-base text-muted-foreground">✱</Text>
       </Animated.View>
-      <View style={styles.textRow}>
-        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>{shownText}</Text>
+      <View className="flex-row items-center">
+        <Text className="text-base text-muted-foreground">{shownText}</Text>
         {(statusText || isTyping) && (
           <Animated.View style={cursorStyle}>
-            <Text style={{ fontSize: 16, color: colors.mutedForeground }}>|</Text>
+            <Text className="text-base text-muted-foreground">|</Text>
           </Animated.View>
         )}
       </View>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingVertical: 8,
-  },
-  textRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});

package/src/components/ui/dropdown-menu.web.tsx

@@ -142,7 +142,7 @@ const DropdownMenuSubContent = React.forwardRef<
       )}
       style={{
         boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-        border: '1px solid hsl(var(--border))',
+        border: '1px solid var(--border)',
         ...style as any,
       }}
       {...props}
@@ -168,7 +168,7 @@ const DropdownMenuContent = React.forwardRef<
       )}
       style={{
         boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
-        border: '1px solid hsl(var(--border))',
+        border: '1px solid var(--border)',
         ...style as any,
       }}
       {...props}

package/src/components/voice/AudioWaveVisualizer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { View, Platform, useWindowDimensions } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import { View, Platform, useWindowDimensions, useColorScheme } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, {
   useSharedValue,
@@ -15,6 +15,13 @@ import type { AgentState } from '../../types';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
+/** Cross-platform blur: CSS string on web, RN array syntax on native */
+function blurStyle(radius: number) {
+  return Platform.OS === 'web'
+    ? ({ filter: `blur(${radius}px)`, WebkitFilter: `blur(${radius}px)` } as any)
+    : ({ filter: [{ blur: radius }] } as any);
+}
+
 const GLOW_HEIGHT = 350;
 const NUM_POINTS = 8;
 
@@ -167,20 +174,79 @@ const BLOB_COLORS: Record<AgentState, string[]> = {
   speaking: ['#1e2870', '#6366f1', '#9333ea', '#0ea5e9'],
 };
 
+// Derive wave & blob palettes from a hex color
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+
+function darken(rgb: [number, number, number], factor: number): [number, number, number] {
+  return [Math.round(rgb[0] * factor), Math.round(rgb[1] * factor), Math.round(rgb[2] * factor)];
+}
+
+function lighten(rgb: [number, number, number], factor: number): [number, number, number] {
+  return [
+    Math.min(255, Math.round(rgb[0] + (255 - rgb[0]) * factor)),
+    Math.min(255, Math.round(rgb[1] + (255 - rgb[1]) * factor)),
+    Math.min(255, Math.round(rgb[2] + (255 - rgb[2]) * factor)),
+  ];
+}
+
+function deriveWavePalette(hex: string, isDark: boolean): { waves: string[]; blobs: string[] } {
+  const rgb = hexToRgb(hex);
+  // Dark mode: lighter/brighter waves visible against dark bg
+  // Light mode: darker waves visible against light bg
+  const layer0 = isDark ? darken(rgb, 0.55) : darken(rgb, 0.3);
+  const layer1 = isDark ? lighten(rgb, 0.15) : darken(rgb, 0.5);
+  const layer2 = isDark ? lighten(rgb, 0.4) : darken(rgb, 0.15);
+  const layer3 = isDark ? lighten(rgb, 0.6) : rgb;
+  return {
+    waves: [
+      `rgba(${layer0[0]}, ${layer0[1]}, ${layer0[2]}, 0.8)`,
+      `rgba(${layer1[0]}, ${layer1[1]}, ${layer1[2]}, 0.45)`,
+      `rgba(${layer2[0]}, ${layer2[1]}, ${layer2[2]}, 0.35)`,
+      `rgba(${layer3[0]}, ${layer3[1]}, ${layer3[2]}, 0.25)`,
+    ],
+    blobs: [
+      `rgb(${layer0[0]}, ${layer0[1]}, ${layer0[2]})`,
+      `rgb(${layer1[0]}, ${layer1[1]}, ${layer1[2]})`,
+      `rgb(${layer2[0]}, ${layer2[1]}, ${layer2[2]})`,
+      `rgb(${layer3[0]}, ${layer3[1]}, ${layer3[2]})`,
+    ],
+  };
+}
+
 interface AudioWaveVisualizerProps {
   waveAmplitude: SharedValue<number>;
   agentState: AgentState;
   isConnected: boolean;
+  /** Theme primary color hex — derives idle/listening wave palette */
+  primaryColor?: string;
+  /** Whether the app is in dark mode (affects wave brightness) */
+  isDarkMode?: boolean;
 }
 
 export function AudioWaveVisualizer({
   waveAmplitude,
   agentState = 'idle',
   isConnected,
+  primaryColor,
+  isDarkMode,
 }: AudioWaveVisualizerProps) {
   const { width: screenWidth } = useWindowDimensions();
+  const scheme = useColorScheme();
+  const effectiveIsDark = isDarkMode ?? (scheme === 'dark');
   const state = WAVE_COLORS[agentState] ? agentState : 'idle';
 
+  // Use theme-derived palette for idle/listening, keep hardcoded for thinking/speaking
+  const themed = useMemo(
+    () => (primaryColor ? deriveWavePalette(primaryColor, effectiveIsDark) : null),
+    [primaryColor, effectiveIsDark],
+  );
+  const isThemed = (state === 'idle' || state === 'listening') && themed != null;
+  const waveColors = isThemed ? themed.waves : WAVE_COLORS[state];
+  const blobColors = isThemed ? themed.blobs : BLOB_COLORS[state];
+
   return (
     <View
       style={{
@@ -194,7 +260,7 @@ export function AudioWaveVisualizer({
         <GlowBlob
           key={`blob-${i}`}
           blob={blob}
-          color={BLOB_COLORS[state][i]}
+          color={blobColors[i]}
           waveAmplitude={waveAmplitude}
           isConnected={isConnected}
           screenWidth={screenWidth}
@@ -206,7 +272,7 @@ export function AudioWaveVisualizer({
         <OceanWave
           key={`wave-${i}`}
           layer={layer}
-          color={WAVE_COLORS[state][i]}
+          color={waveColors[i]}
           waveAmplitude={waveAmplitude}
           isConnected={isConnected}
           screenWidth={screenWidth}
@@ -279,14 +345,6 @@ function OceanWave({
     return { d };
   });
 
-  const webBlurStyle =
-    Platform.OS === 'web'
-      ? ({
-          filter: `blur(${layer.blur}px)`,
-          WebkitFilter: `blur(${layer.blur}px)`,
-        } as any)
-      : {};
-
   return (
     <View
       style={{
@@ -296,7 +354,7 @@ function OceanWave({
         right: 0,
         bottom: 0,
         opacity: isConnected ? 1 : 0,
-        ...webBlurStyle,
+        ...blurStyle(layer.blur),
         pointerEvents: 'none',
       }}
     >
@@ -365,13 +423,5 @@ function GlowBlob({
     };
   });
 
-  const webBlurStyle =
-    Platform.OS === 'web'
-      ? ({
-          filter: `blur(${blob.blur}px)`,
-          WebkitFilter: `blur(${blob.blur}px)`,
-        } as any)
-      : {};
-
-  return <Animated.View style={[animatedStyle, webBlurStyle]} />;
+  return <Animated.View style={[animatedStyle, blurStyle(blob.blur)]} />;
 }